我一直在使用CSS flexbox为帖子列表制定砖石布局样式，我实现了布局，但没有实现帖子块的砖石布局。
如果你检查下面的示例代码，你可以看到我已经得到了第一个强制100%宽度的帖子。但剩下的柱子被包裹或对齐均匀，我希望它看起来像砖石。
如何使用CSS flexbox实现这种布局？
/* Box Sizing */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Post Layout Using Flex */
.post_layout {
display: flex;
flex-wrap: wrap;
height: 100vw;
max-height: 800px;
border:1px solid red;
box-sizing: border-box;
}
.first-post {
width: 100%;
transition: .8s opacity;
border:1 px solid green;
}
.col-6 {
width: 50%;
transition: .8s opacity;
border:1px solid blue;
}<div class="post_layout">
<div class="first-post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget placerat lectus. Aliquam erat volutpat. Integer condimentum quis diam sed elementum. Donec vitae tellus in turpis condimentum ullamcorper non in nulla. Praesent erat ligula, facilisis sed augue eget, commodo ultrices eros. Morbi id augue semper, tincidunt purus et, semper ipsum. Vivamus tristique efficitur pharetra. Sed tempus malesuada purus, eget dapibus nibh ultrices vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent ante ipsum, tincidunt at varius et, ornare sed turpis.
</div>
<div class="col-6">
In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
</div>
<div class="col-6">
Praesent efficitur ligula magna, eget maximus nibh maximus a. Nulla facilisi. In hac habitasse platea dictumst. Suspendisse vulputate nulla vitae nunc luctus, vitae venenatis est efficitur. Praesent iaculis, mauris condimentum vulputate fermentum, dui elit rutrum ligula, non efficitur risus tortor sed massa. Sed a dui semper, finibus ex quis, posuere tortor. Duis rutrum lacus vitae feugiat gravida. Nullam a orci sit amet purus tempor commodo. Praesent blandit nisl tellus, non accumsan felis sollicitudin eu. Vivamus fermentum elit id urna varius feugiat. Morbi consequat tortor at eros fringilla, eu euismod nulla consectetur.
</div>
<div class="col-6">
Etiam dictum urna vitae ante varius cursus. Praesent mollis faucibus lorem et dignissim. Nullam consectetur rhoncus luctus. Curabitur ut mattis est. Nullam dictum finibus nisl, nec sollicitudin nibh placerat sit amet. Nam eleifend, leo volutpat gravida porta, nisi ipsum suscipit leo, quis iaculis nulla leo eget turpis. Suspendisse pulvinar at erat in ultricies. Praesent leo metus, bibendum in blandit sed, consequat sed nisi. Phasellus sit amet justo et felis maximus scelerisque. Praesent non dolor porta, scelerisque mauris ac, pharetra massa. Suspendisse blandit eu risus non elementum. Aenean bibendum sed mauris id dignissim. Sed nunc metus, convallis vel sagittis sed, porttitor a diam.
</div>
<div class="col-6">
Etiam auctor odio eu dolor placerat pulvinar non cursus nisl. Vivamus venenatis sollicitudin quam non iaculis. Nullam sagittis dolor nec arcu gravida facilisis. Nulla non eros in metus consequat lacinia. Fusce viverra lectus sed lectus tempor facilisis. Nunc mi enim, pulvinar non vestibulum non
</div>
<div class="col-6">
Nulla facilisi. Nulla pulvinar et nibh in fringilla. Integer pellentesque laoreet viverra. Suspendisse placerat massa et rutrum pretium. Curabitur tincidunt id massa non suscipit. Nunc dictum enim gravida augue interdum, eu luctus massa vulputate. Ut mi leo, facilisis ut massa vel, ullamcorper eleifend sapien. Suspendisse ornare velit cursus consectetur mattis. Phasellus placerat imperdiet nunc, ut facilisis turpis eleifend vel. Donec nec maximus tellus, aliquet sodales turpis. Mauris consectetur justo sem, et vulputate elit ornare sed. Maecenas vel mauris scelerisque lacus finibus bibendum vel id lectus. Aenean in hendrerit velit.
</div>
<div class="col-6">
In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
</div>
</div>您可以查看https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts
CSS多列布局模块扩展了块布局模式，允许轻松定义多列文本。如果行太长，人们在阅读文本时会遇到困难；如果眼睛从一行的末尾移动到下一行的开头需要很长时间，他们就会记不清自己在哪一行。因此，为了最大限度地利用大屏幕，作者应该像报纸那样，将宽度有限的文本列并排放置
教程等https://css-tricks.com/almanac/properties/c/columns/
只需一些CSS规则，您就可以创建一个具有web灵活性的以打印为灵感的布局。这就像拿一份报纸，但随着报纸越来越小，栏目会自动调整和平衡，让内容自然流动。
用于测试行为的代码段。
/* Box Sizing */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Post Layout not Using Flex */
.post_layout {
column-count:2;
column-fill:balance;
border:1px solid red;
box-sizing: border-box;
}
.first-post {
transition: .8s opacity;
border:1 px solid green;
}
.col-6 {
transition: .8s opacity;
border:1px solid blue;
margin:5px
}<div class="first-post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget placerat lectus. Aliquam erat volutpat. Integer condimentum quis diam sed elementum. Donec vitae tellus in turpis condimentum ullamcorper non in nulla. Praesent erat ligula, facilisis sed augue eget, commodo ultrices eros. Morbi id augue semper, tincidunt purus et, semper ipsum. Vivamus tristique efficitur pharetra. Sed tempus malesuada purus, eget dapibus nibh ultrices vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent ante ipsum, tincidunt at varius et, ornare sed turpis.
</div>
<div class="post_layout">
<div class="col-6">
In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
</div>
<div class="col-6">
Praesent efficitur ligula magna, eget maximus nibh maximus a. Nulla facilisi. In hac habitasse platea dictumst. Suspendisse vulputate nulla vitae nunc luctus, vitae venenatis est efficitur. Praesent iaculis, mauris condimentum vulputate fermentum, dui elit rutrum ligula, non efficitur risus tortor sed massa. Sed a dui semper, finibus ex quis, posuere tortor. Duis rutrum lacus vitae feugiat gravida. Nullam a orci sit amet purus tempor commodo. Praesent blandit nisl tellus, non accumsan felis sollicitudin eu. Vivamus fermentum elit id urna varius feugiat. Morbi consequat tortor at eros fringilla, eu euismod nulla consectetur.
</div>
<div class="col-6">
Etiam dictum urna vitae ante varius cursus. Praesent mollis faucibus lorem et dignissim. Nullam consectetur rhoncus luctus. Curabitur ut mattis est. Nullam dictum finibus nisl, nec sollicitudin nibh placerat sit amet. Nam eleifend, leo volutpat gravida porta, nisi ipsum suscipit leo, quis iaculis nulla leo eget turpis. Suspendisse pulvinar at erat in ultricies. Praesent leo metus, bibendum in blandit sed, consequat sed nisi. Phasellus sit amet justo et felis maximus scelerisque. Praesent non dolor porta, scelerisque mauris ac, pharetra massa. Suspendisse blandit eu risus non elementum. Aenean bibendum sed mauris id dignissim. Sed nunc metus, convallis vel sagittis sed, porttitor a diam.
</div>
<div class="col-6">
Etiam auctor odio eu dolor placerat pulvinar non cursus nisl. Vivamus venenatis sollicitudin quam non iaculis. Nullam sagittis dolor nec arcu gravida facilisis. Nulla non eros in metus consequat lacinia. Fusce viverra lectus sed lectus tempor facilisis. Nunc mi enim, pulvinar non vestibulum non
</div>
<div class="col-6">
Nulla facilisi. Nulla pulvinar et nibh in fringilla. Integer pellentesque laoreet viverra. Suspendisse placerat massa et rutrum pretium. Curabitur tincidunt id massa non suscipit. Nunc dictum enim gravida augue interdum, eu luctus massa vulputate. Ut mi leo, facilisis ut massa vel, ullamcorper eleifend sapien. Suspendisse ornare velit cursus consectetur mattis. Phasellus placerat imperdiet nunc, ut facilisis turpis eleifend vel. Donec nec maximus tellus, aliquet sodales turpis. Mauris consectetur justo sem, et vulputate elit ornare sed. Maecenas vel mauris scelerisque lacus finibus bibendum vel id lectus. Aenean in hendrerit velit.
</div>
<div class="col-6">
In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
</div>
</div>不支持column-span，您需要从列框中取出第一个块。