仅限 flexbox CSS 的水平砌体布局

Question

我正在尝试仅使用 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;
}

full codepen here

Answer 1

Flex box wrap 将溢出的元素包装到一个新行中。与上一行一样，这一新行具有其中最高 flex child 的高度。它不会让行中的元素超出行边界。

所以不幸的是，不，你不能用 flexbox 来关闭垂直间隙。

Answer 2

这是一个使用环绕列的选项，但它需要固定的高度。

.card-container {
  display: flex;
  flex-flow: column wrap;
  height:100vh;
  align-items: center;
  background-color: #888;
}

CSS 砌体布局的更好选择是使用柱子，此博客上有一个示例 post 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%;
}

仅限 flexbox CSS 的水平砌体布局

Horizontal masonry layout with flexbox CSS only

css

layout

flexbox

masonry