1
私は、CSSフレックスボックスを使用して投稿リスト用の石積みレイアウトスタイルを作成していましたが、投稿ブロックのレイアウトはできませんでした。CSS Flexbox最初のブロックを除いた石積み
以下のサンプルコードを確認すると、最初の投稿が100％幅で強制されていることがわかります。しかし、残りのポストは、同じようにラップまたは整列されており、それは石積みのように見えます。
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 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>
適切な石積みを達成する唯一の方法は、js – Pete
を使用して、css flex経由で石工スクリプトを模倣することです。列の方向が必要です。 column-cssはあなたが探しているものに近いかもしれません。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts。 –