将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重新创build砌体：一行中的项目不能占用为前一行/后一行分配的空间（如果使用列方向，则同样适用于列）。 你可以使用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; } 

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

Answer 2

你可以用flexbox创build只有CSS的砌体布局，查看这篇文章的完整说明： https ://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a

2017更新：使用CSS网格。