仅使用flexbox CSS的水平砌体布局 [英] Horizontal masonry layout with flexbox CSS only
本文介绍了仅使用flexbox CSS的水平砌体布局的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图只使用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 masonry布局的一个更好的选择是使用列,本博文 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屋!
查看全文