css - 将 flexbox 子项设置为具有不同的高度以耗尽可用空间

Question

使用两列 flexbox 布局，如何让不同大小的子元素填满所有可用空间，而不是让所有子元素具有该行最高子元素的高度？

我在 jsbin 上设置了一个演示这说明了问题。我希望所有的 child 都是他们包装的内容的大小。

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex; 1 auto;
}


<div id="container">

<div class="cell">
Cells with arbitrarily long content.</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

</div>

</body>
</html>

Answer 1

这就是 Flexbox 行的预期行为方式。 Flexbox 并不是要用纯 CSS 重新创建 Masonry:一行中的元素不能占用为前一行/后一行分配的空间(如果您使用列方向，列也是如此)。您可以使用 align-items 来防止它们拉伸(stretch)，仅此而已:

http://cssdeck.com/labs/9s9rhrhl

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

否则，您应该使用列方向或多列模块(请参阅此 SO 答案:https://stackoverflow.com/a/20862961/1652962)