仅使用 flexbox CSS 的水平砌体布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28681572/
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
Horizontal masonry layout with flexbox CSS only
提问by Julian
I'm trying to create a horizontal masonry layout using only CSS and flexbox. The problem I'm having is there are vertical gaps between the elements, without using align-left: stretch;is it possible to close the gaps?
我正在尝试仅使用 CSS 和 flexbox 创建水平砌体布局。我遇到的问题是元素之间存在垂直间隙，不使用align-left: stretch;是否可以关闭间隙？
.card-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.card {
width: 25%;
flex: 1 0 auto;
}
采纳答案by user2548213
Here is one option using wrapped columns, but it requires a fixed height.
这是使用包裹柱的一种选择，但它需要固定高度。
.card-container {
display: flex;
flex-flow: column wrap;
height:100vh;
align-items: center;
background-color: #888;
}
A better option for CSS masonry layout is to use columns, an example is on this blog post http://w3bits.com/css-masonry/
CSS 砌体布局的更好选择是使用列，此博客文章中的示例http://w3bits.com/css-masonry/
.masonry { /* Masonry container */
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
.item { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
回答by joerideg
Flex box wrap wraps the overflowing elements to a new row. This new row has, just like the previous row, the height of the highest flex child in it. It will not let the elements in the row go outside that rows boundaries.
Flex box wrap 将溢出的元素包装到新行。这个新行与前一行一样，具有其中最高 flex 子项的高度。它不会让行中的元素超出行边界。
So unfortunately, no you cannot close the vertical gaps with flexbox.
所以不幸的是，不，你不能用 flexbox 关闭垂直间隙。
