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を複数入れて対応。