时间戳

首页 > 解决方案 > 为什么当我使用 flex-direction 时我的 div 会消失？

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

问题描述

我目前正在研究我的网页的响应能力，并且已经实现了 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>

标签： htmlcssflexbox

解决方案

#top 和 #bottom div 没有高度。你可以给他们一个高度。IE#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>

推荐阅读