Question

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

我在jsbin上设置了一个说明问题的演示。我希望所有的孩子都能达到包装内容的大小。

#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来阻止它们伸展，但这就是它：

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）

将flexbox子项设置为具有不同的高度以占用可用空间

1 个答案: