使flexbox填满所有空间

Question

我有盒子，我正在使用flexbox进行布局。 Flexbox使行“有条理”。意思是，如果1个盒子的高度大于其他所有盒子的高度，则第二行的所有盒子都被向下推，并且第一行的盒子下面有一个空间较小的空间。

这是我的意思的图像：

框＃01下方有空间，因为框＃2的高度较大。我希望＃4框在＃1框下方。

如何让所有盒子填满它们上方的空间？

JSFiddle

#wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 400px;
}
.tile {
  background-color: lightblue;
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 10px;
}
#n2 {
  height: 200px;
}

<div id="wrapper">
  <div class="tile" id="n1">01</div>
  <div class="tile" id="n2">02</div>
  <div class="tile" id="n3">03</div>
  <div class="tile" id="n4">04</div>
  <div class="tile" id="n5">05</div>
</div>

Answer 1

您可以使用flex-direction: column和flex-wrap: wrap来实现此目的，但您将无法保留元素的顺序。

像Masonry这样的JavaScript库可能值得研究。

Answer 2

就像Darryl所说，你想用flex-flow: column wrap;和父元素上的固定高度来做这件事。关于CSS-Tricks的This page对于理解语法是非常宝贵的，但基本上改变flex-direction会将其翻转。您可以通过在子图块上设置order: XX来指定子项的顺序。