Flexboxのjustify-contentで最後の行を左寄せにする方法
基本のレイアウト
<section class="container"> <section class="sec01">セクション1</section> <section class="sec01">セクション2</section> <section class="sec01">セクション3</section> <section class="sec01">セクション4</section> </section>
3カラムの場合
.container { display: flex; flex-wrap: wrap; justify-content: space-between; &::after{ content: ""; display: block; width: calc((100% - 2em) / 3); } .sec01 { width: calc((100% - 2em) / 3); } }
4カラムの場合
.container { display: flex; flex-wrap: wrap; justify-content: space-between; &::before { content: ""; display: block; width: calc((100% - 3em) / 4); order: 1; } &::after { content:""; display: block; width: calc((100% - 3em) / 4); } .sec01 { width: calc((100% - 3em) / 4); } }
5カラム以上
対応が難しいので、 sec01を複数入れて対応。