仅使用 flexbox CSS 的水平砌体布局 [英] Horizontal masonry layout with flexbox CSS only

问题描述

我正在尝试仅使用 CSS 和 flexbox 创建水平砌体布局.我遇到的问题是元素之间存在垂直间隙，不使用 align-left:stretch; 是否可以关闭间隙?

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?

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  align-items: flex-start;
}


.card {
  width: 25%;
  flex: 1 0 auto;
}

这里是完整的代码笔

推荐答案

这里有一个使用包裹列的选项，但它需要一个固定的高度.

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;
}

CSS 砌体布局的更好选择是使用列，此博客文章中的示例 http://w3bits.com/css-masonry/

A better option for CSS masonry layout is to use columns, an example is on this blog 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 的水平砌体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！