水平砖石布局与flexbox CSS只有

发布时间：2020-12-15 02:12:52 所属栏目：百科来源：网络整理

导读：参见英文答案 Set flexbox children to have different heights to use up available space 我试图使用CSS和flexbox创建一个水平的砖石布局。我遇到的问题是元素之间存在垂直间隙，而不使用对齐左：stretch;有可能弥合差距吗？ .card-container { display: f

参见英文答案 > Set flexbox children to have different heights to use up available space
我试图使用CSS和flexbox创建一个水平的砖石布局。我遇到的问题是元素之间存在垂直间隙，而不使用对齐左：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

解决方法

这里有一个使用包装柱的选项，但它需要一个固定的高度。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!