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

Question

与图像类似 - http://i65.tinypic.com/aa7ndw.png示例和实时弹性配置器仅解释简单示例，或者我只是不明白。

我是否可以使用媒体查询，例如在＆lt;时不显示a4 800像素？

我总是使用浮动和弹性在某种程度上'不同'无论如何我想更好地了解它，所以任何帮助都是值得赞赏的。

flex specific example

Answer 1

将display: flex应用于容器，其子元素将以flex显示。对于此布局，您将希望在已为当前行填充宽度时包装元素。

页眉和页脚将为width: 100%，占据一整行。 ＃a3和＃a4将flex: 1分配行的宽度，每行占宽度的50％。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;