Question

我正在尝试构建一个简单的flex布局，其中5个元素嵌套在3个容器中，所有内容都包含在宏容器中。

然而，当我调整窗口大小时，第一个元素被下面的元素隐藏。感谢您的帮助！

body {
  margin: 0;
}

.macro-container {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.subcontainer {
  height: 33.3%;
  width: 100%;
  display: flex;
}

.subcontainer1 {
  width: 100%;
}

.subcontainer2 {
  width: 100%;
  flex-wrap: wrap-reverse;
}

.subcontainer3 {
  width: 100%;
  flex-wrap: wrap;
}

.item-text {
  min-width: 300px;
  height: 100%;
  width: 100%;
  flex: 3;
}

.item-photo {
  min-width: 300px;
  height: auto;
  width: 100%;
  flex: 1;
}

<html>

<div class="macro-container">

  <div class="subcontainer subcontainer1">

    <div class="item-text">
      <h2 class="item-text-heading">LOREM IPSUM</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
        Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </div>


  </div>

  <div class="subcontainer subcontainer2">


    <div class="item-text">
      <h2 class="item-text-heading">LOREM IPSUM</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
        Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="item-photo">
      <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" class="item-photo">
    </div>


  </div>

  <div class="subcontainer subcontainer3">


    <div class="item-photo">
      <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" class="item-photo">
    </div>

    <div class="item-text">
      <h2 class="item-text-heading">LOREM IPSUM</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
        Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </div>


  </div>



</div>


</html>

简单的flex布局，在调整屏幕大小时，顶部div被以下隐藏

0 个答案: