flexbox如何实现这种特定的布局？

Question

就像图片中一样 - http://i65.tinypic.com/aa7ndw.png 示例和实时 flex 配置器只是简单的示例，或者我就是不明白。

我能否使用媒体查询来例如在

我一直使用 float 和 flex 无论如何我想更好地了解它，所以任何帮助都非常感谢。

flex specific example

Answer 1

将display: flex 应用到一个容器，它的子元素将显示在 flex 中。对于这种布局，当当前行的宽度已经填满时，您需要包装元素。

页眉和页脚将是width: 100%，占一整行。 #a3 和#a4 将使用flex: 1 分配其行的宽度，每行占宽度的50%。

div.flex-container{
  width: 200px;
  height: 300px;
  background-color: black;
  
  display: flex;
  flex-flow: row wrap;
}

#a1, #a2{
  width: 100%;
}

#a3, #a4{
  flex: 1;
}

#a5, #a6, #a7{
  height: 50px;
  width: 80%;
  margin: auto;
  margin-bottom: 1rem;
}

/* Example styles */
div{
  text-align: center;
}
#a1{
  background-color: red;
}
#a2{
  background-color: limegreen;
}
#a3{
  background-color: royalblue;
}
#a4{
  background-color: cyan;
}
#a5, #a6, #a7{
  background-color: fuchsia;
}

<div class="flex-container">
  <div id="a1">a1</div>
  <div id="a3">a3</div>
  <div id="a4">a4
    <div id="a5">a5</div>
    <div id="a6">a6</div>
    <div id="a7">a7</div>
  </div>
  <div id="a2">a2</div>
</div>

是的，您可以正常使用媒体查询

div.flex-container{
  width: 200px;
  height: 300px;
  background-color: black;
  
  display: flex;
  flex-flow: row wrap;
}

#a1, #a2{
  width: 100%;
}

#a3, #a4{
  flex: 1;
}

#a5, #a6, #a7{
  height: 50px;
  width: 80%;
  margin: auto;
  margin-bottom: 1rem;
}

@media (max-width: 800px){
  #a4{
    display: none;
  }
}

/* Example styles */
div{
  text-align: center;
}
#a1{
  background-color: red;
}
#a2{
  background-color: limegreen;
}
#a3{
  background-color: royalblue;
}
#a4{
  background-color: cyan;
}
#a5, #a6, #a7{
  background-color: fuchsia;
}

<div class="flex-container">
  <div id="a1">a1</div>
  <div id="a3">a3</div>
  <div id="a4">a4
    <div id="a5">a5</div>
    <div id="a6">a6</div>
    <div id="a7">a7</div>
  </div>
  <div id="a2">a2</div>
</div>