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

Question

我正在尝试使用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：列对我不起作用，因为它会破坏内容的顺序。

Answer 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中我刚刚添加了两个新的包装器调整了它们的宽度，但当然可以使用它。