flex-框不是包装框

Question

我已经制作了.main_area flexbox，其中有两个元素，但Flex-wrap无法正常工作。 我希望，如果我在820px屏幕上打开它，那么它应该是对此的解决方案

.main_area {
      display: flex;
      flex-wrap: wrap;
      /* background-color: burlywood; */
      height: 80vh;
      width: 100%;
    }
    .picture_area {
      display: flex;
      align-items:baseline;
      justify-content: flex-end;
      /* background-color: red; */
      height: 80vh;
      width: 50%;
    }
    .picture_area img {
      height: 100%;
      /* width: 100%; */
      float: right;
      filter: grayscale(1);
    }
    .content_area {
      /* background-color: blue; */
      height: 80vh;
      width: 30%;
      flex-direction: column;
      align-items: center;
      justify-content:center;
    }```

the html code is
``` <div class="main_area">
      <div class="picture_area" id="picture_area">
        <img src="./Cartoons_Bugs_Tunes_Looney_Bunny_Bugs_bunny_HD_Wallpapers-removebg.png" alt="">
      </div>
      <div class="content_area d-flex" id="content_area">
        <h1 class="UI_pattern">UI Problem</h1>
        <h1 class="UI_pattern">solver</h1>
        <p class="UI_para">And this is why my competitors</p>
        <p class="UI_para">Simply call me 'Revolver'</p>
        <input type="text" class="Busi_email" placeholder="Type your business email">
        <button class="UI_button">Get in touch</button>
      </div>
    </div>

Answer 1

您可能忘记在 CSS 语句之前添加选择器吗？

.main-area{      
      display: flex;
      flex-wrap: wrap;
      /* background-color: burlywood; */
      height: 80vh;
      width: 100%;
    }

Answer 2

这应该对您有效：

.main_area {
  display: flex;
  flex-wrap: wrap;
  /* background-color: burlywood; */
  height: 80vh;
  width: 100%;
}

.picture_area {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  /* background-color: red; */
  height: 80vh;
  width: 50%;
}

.picture_area img {
  height: 100%;
  /* width: 100%; */
  float: right;
  filter: grayscale(1);
}

.content_area {
  /* background-color: blue; */
  height: 80vh;
  width: 30%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 100%;
}

@media only screen and (max-width: 820px) {
  .main_area {
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    align-items: center;
    justify-content: center;
  }
}

<div class="main_area">
  <div class="picture_area" id="picture_area">
    <img src="https://dummyimage.com/600x400/000/fff" alt="">
  </div>
  <div class="content_area d-flex" id="content_area">
    <h1 class="UI_pattern">UI Problem</h1>
    <h1 class="UI_pattern">solver</h1>
    <p class="UI_para">And this is why my competitors</p>
    <p class="UI_para">Simply call me 'Revolver'</p>
    <input type="text" class="Busi_email" placeholder="Type your business email">
    <button class="UI_button">Get in touch</button>
  </div>
</div>