css flexbox 包装和拆分答案

【问题标题】：css flexbox wrapping and breakingcss flexbox 包装和拆分
【发布时间】：2015-12-11 09:24:19
【问题描述】：

如何在 flexbox 中构建这个网格系统？

我有以下标记：

<section>
    <div></div>
    <div></div>
    <div></div>
    <div class="separator"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="separator"></div>
</section>

我想这样显示：

规则是：

总是 2 列
行中的单元格应具有相同的高度（动态，基于内容）
不要求行之间的高度相同
分隔符行应占 2 列，并从最左边的列开始

我可以让一切正常工作，除了让分隔符正常中断，只需执行以下操作：

section
{
    width: 800px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
 }

div
{
    width: 350px;
    margin: 10px;
}

谢谢

【问题讨论】：

如何为分隔符分配 100% 宽度，并确保 flex 父级允许换行？

标签： css flexbox

【解决方案1】：

这是一种可能的方式：

section {
  width: 800px;
  display: flex;
  flex-flow: row wrap;
}
section > div {
  flex: 0 0 calc(50% - 10px);
  background-color: blue;
  /*for the demo*/
  min-height: 100px;
  margin: 5px;
}

section > .separator
{
  flex-basis: 100%;
  background-color: gray;
  min-height: 10px;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div class="separator"></div>
  <div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="separator"></div>
</section>

【讨论】：