我想通过 flexbox.Child 元素创建砖石布局。Child 元素应按以下顺序出现，并且子元素具有不同的高度和相同的宽度。我正在使用延迟加载。
1 2
3 4
5 6
从技术上讲，这是可能的flex-flow: column-wrap，但是您需要知道容器的高度，以便项目可以正确换行，此外您还需要重新排序弹性项目，因为默认顺序是垂直的。
@import url('https://fonts.googleapis.com/css?family=Montserrat');
html,
body {
margin: 0;
font-family: "Montserrat", sans-serif;
font-size: 16px;
}
.container {
height: 500px;
width: 200px;
display: flex;
padding: 2px;
flex-direction: column;
flex-wrap: wrap;
}
.cell {
color: white;
background: #e91e63;
height: 150px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid white;
border-radius: 5px;
}
.c2 {
order: 4;
height: 100px;
}
.c3 {
order: 2;
height: 100px;
}
.c4 {
order: 5;
height: 200px;
}
.c5 {
order: 3;
}
.c6 {
order: 6;
height: 100px;
}
<div class="container">
<div class="cell c1">1</div>
<div class="cell c2">2</div>
<div class="cell c3">3</div>
<div class="cell c4">4</div>
<div class="cell c5">5</div>
<div class="cell c6">6</div>
</div>
对于其他在这个问题中寻找纯 css 砌体解决方案的人，我推荐 Michael_B 的以下答案（目前唯一且最完整的答案）：
- 仅 CSS 砖石布局，但元素水平排序 https://stackoverflow.com/questions/44377343/css-only-masonry-layout-but-with-elements-ordered-horizontally
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
