使用两列弹性框布局，如何使不同大小的孩子填充所有可用空间，而不是所有孩子的行高度最高的孩子？
我在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>
解决方法
这就是FlexBox行的行为方式。 FlexBox不是要用纯CSS重新创建砖石：一行中的项目不能占用前一个/后续行分配的空间(如果使用列方向，则与列相同)。您可以使用对齐项来阻止它们伸展，但这是关于它：
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答案：http://stackoverflow.com/a/20862961/1652962)
