Question

如何在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>

我希望这样显示：

http://www.mathworks.com/help/matlab/ref/plot.html

规则是：

总是2列
行中的单元格应该是相同的高度（动态，基于内容）
不要求行与彼此的高度相同
分隔符行应占用2列，并从最左侧的列开始

我可以通过简单地执行以下操作来完成所有工作：

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

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

由于

Answer 1

这是一种可能的方式：

＆＃13;

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

＆＃13;

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

＆＃13;

css flexbox包装和破碎

1 个答案: