参见英文答案 >
Set flexbox children to have different heights to use up available space
我试图使用CSS和flexBox创建一个水平的砖石布局。我遇到的问题是元素之间存在垂直间隙，而不使用对齐左：stretch;有可能弥合差距吗？
我试图使用CSS和flexBox创建一个水平的砖石布局。我遇到的问题是元素之间存在垂直间隙，而不使用对齐左：stretch;有可能弥合差距吗？
.card-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.card {
width: 25%;
flex: 1 0 auto;
}
解决方法
这里有一个使用包装柱的选项，但它需要一个固定的高度。
.card-container {
display: flex;
flex-flow: column wrap;
height:100vh;
align-items: center;
background-color: #888;
}
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%;
}