Question

我目前正在研究网页的响应能力，并已实现flexbox来放置页面元素。我遇到的问题是，当我在媒体查询中使用“ flex-direction：column”时，在调整浏览器大小时div消失了。我在这里做什么错了？

  #blue {
  background-color: #57afb5;
  max-width: 470px;
  height: 350px;
  flex: 1;
  justify-content: space-around;
}

#dark-green {
  background-color: #29914c;
  max-width: 470px;
  height: 350px;
  flex: 1;
  justify-content: space-around;
}

#green {
  background-color: #91e3ad;
  max-width: 470px;
  height: 350px;
  flex: 1;
  justify-content: space-around;
}

#orange {
  background-color: #c98a32;
  max-width: 470px;
  height: 350px;
  flex: 1;
  justify-content: space-around;
}

#top {
  display: flex;
  justify-content: space-around;
  margin-top: 2%;
}

#bottom {
  display: flex;
  justify-content: space-around;
  margin-top: 2%;
}


/* responsive web design*/

@media only screen and (max-width: 960px) {
  #top {
    display: flex;
    flex-direction: column;
  }
  #bottom {
    display: flex;
    flex-direction: column;
  }
  /*end of responsive web design*/

<div class='main-content'>
  <div id='Navbar_Link-Toggle' style='font-size: 20px'>
    <i id='main' class='fas fa-bars'></i>
  </div>
  <div class='container'>
    <div class='Navbar'>
      <a class='links' href=''>FOOD</a>
      <a class='links' href=''>FUN</a>
      <img id='center-logo' src='img/SAMO.png'>
      <a class='links' href=''>HISTORY</a>
      <a class='links' href=''>LOCATION</a>
    </div>
  </div>
  <div class='header'>
    <img id='food' src='img/food.jpg'>
  </div>
</div>
<div id='top'>
  <div id='blue'></div>
  <div id='dark-green'></div>
</div>
<div id='bottom'>
  <div id='green'></div>
  <div id='orange'></div>
</div>
</div>

Answer 1

#top和#bottom div没有高度。你可以给他们很高的评价。即#top, #bottom { hight: 700px; }

或者，使用display: block;，如下例所示。

侧面说明：当我缺少元素时，有时会在它们上加上border: solid red 2px;以更好地可视化正在发生的事情。希望对下次有帮助！

#blue {
  background-color: #57afb5;
  max-width: 470px;
  height: 350px;
  flex: 1;
  justify-content: space-around;
}

#dark-green {
  background-color: #29914c;
  max-width: 470px;
  height: 350px;
  flex: 1;
  justify-content: space-around;
}

#green {
  background-color: #91e3ad;
  max-width: 470px;
  height: 350px;
  flex: 1;
  justify-content: space-around;
}

#orange {
  background-color: #c98a32;
  max-width: 470px;
  height: 350px;
  flex: 1;
  justify-content: space-around;
}

#top {
  display: flex;
  justify-content: space-around;
  margin-top: 2%;
}

#bottom {
  display: flex;
  justify-content: space-around;
  margin-top: 2%;
}


/* responsive web design*/

@media only screen and (max-width: 960px) {
  #top,
  #bottom {
    display: block;
  }
}
  /*end of responsive web design*/

<div class='main-content'>
  <div id='Navbar_Link-Toggle' style='font-size: 20px'>
    <i id='main' class='fas fa-bars'></i>
  </div>
  <div class='container'>
    <div class='Navbar'>
      <a class='links' href=''>FOOD</a>
      <a class='links' href=''>FUN</a>
      <img id='center-logo' src='img/SAMO.png'>
      <a class='links' href=''>HISTORY</a>
      <a class='links' href=''>LOCATION</a>
    </div>
  </div>
  <div class='header'>
    <img id='food' src='img/food.jpg'>
  </div>
</div>
<div id='top'>
  <div id='blue'></div>
  <div id='dark-green'></div>
</div>
<div id='bottom'>
  <div id='green'></div>
  <div id='orange'></div>
</div>

为什么在使用flex-direction时我的div消失了？

1 个答案: