如何使用 flexbox 创建砌体布局？

【问题标题】：How can I use flexbox to create a masonry layout?如何使用 flexbox 创建砌体布局？
【发布时间】：2015-05-20 20:49:45
【问题描述】：

我正在尝试使用 flexbox 创建砌体布局，但找不到填补空白的方法。

我在下面附上了一个代码笔示例

http://codepen.io/anon/pen/KpgMKX?editors=110

.wrapper {
  margin: auto;
  width: 1024px;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  align-content: stretch;
}

更新：

请注意 flex-direction: 列对我不起作用，因为它破坏了内容的顺序。

【问题讨论】：

Google
我看过这个例子，但它使用列的弹性方向而不是行。
我更新了问题。谢谢。

标签： css flexbox

【解决方案1】：

我会这样做： http://codepen.io/anon/pen/gpwwpX

我又做了两个包装纸，一个用于左侧的两个盒子，一个用于围绕两个包装纸。像这样：

<div class="big-wrapper">
<div class="wrapper2">
    <div class="box oneTwo"></div>
    <div class="box oneOne"></div>
  </div>
<div class="wrapper">
  <div class="box oneOne"></div>
  <div class="box oneOne"></div>
  <div class="box twoOne"></div>
  <div class="box oneTwo"></div>
  <div class="box threes"></div>
</div>
</div>

然后在 CSS 中，我刚刚添加了两个新包装器，稍微调整了它们的宽度，但你当然可以使用它。

【讨论】：

感谢您的评论，但这种方法不会扩展并且有点违背使用 flexbox 的目的。