我一直在使用CSS flexbox为帖子列表进行砌体布局样式，我实现了布局，但没有实现post块的砌体布局。
如果您查看下面的示例代码，您可以看到我的第一篇帖子被强制为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>
答案 0 :(得分：1)
您可以查看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规则，您就可以创建具有网络灵活性的打印灵感布局。这就像拿报纸一样，但随着纸张越来越小，柱子将自动调整和平衡，使内容自然流动。
要测试行为的代码段。
/* 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，您需要从列框中取出第一个块。
答案 1 :(得分：0)
您可以将first-post放出容器，然后在flex中使用列方向，如下所示：
您可能会注意到此布局取决于容器的高度。
/* 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;
flex-direction: column;
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%;
height: auto;
transition: .8s opacity;
border: 1px solid blue;
}<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>