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

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 没有高度。你可以给他们一个高度。 I.E #top, #bottom { 高度: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>