CSS 设置 flexbox 子项具有不同的高度以使用可用空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20977390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set flexbox children to have different heights to use up available space
提问by verysuperfresh
Using a two-column flexbox layout, how can different-sized children be made to fill all available space, instead of all children having the height of the tallest child of the row?
使用两列 flexbox 布局，如何让不同大小的孩子填充所有可用空间，而不是所有孩子都具有该行最高孩子的高度？
I set up a demo on jsbinthat illustrates the problem. I'd like for all the children to be the size of their wrapped contents.
我在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>
回答by cimmanon
This is how Flexbox rows are expected to behave. Flexbox is not meant to recreate Masonry with pure CSS: items in one row cannot occupy space allocated for a preceding/following row (same goes for columns if you're using column orientation). You can use align-items to prevent them from stretching, but that's about it:
这就是 Flexbox 行的行为方式。Flexbox 并不意味着用纯 CSS 重新创建 Masonry：一行中的项目不能占用为前一行/后一行分配的空间（如果您使用列方向，列也是如此）。您可以使用 align-items 来防止它们拉伸，但仅此而已：
http://cssdeck.com/labs/9s9rhrhl
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;
}
Otherwise, you should be using the column orientation or the multi-column module (see this SO answer: https://stackoverflow.com/a/20862961/1652962)
否则，您应该使用列方向或多列模块（请参阅此 SO 答案：https: //stackoverflow.com/a/20862961/1652962）
