Flexboxのjustify-contentで最後の行を左寄せにする方法
基本のレイアウト
1 2 3 4 5 6 | < 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カラムの場合
1 2 3 4 5 6 7 8 9 10 11 12 13 | .container { display : flex ; flex-wrap : wrap ; justify-content : space-between; &::after{ content : "" ; display : block ; width : calc(( 100% - 2em ) / 3 ); } .sec 01 { width : calc(( 100% - 2em ) / 3 ); } } |
4カラムの場合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .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 ); } .sec 01 { width : calc(( 100% - 3em ) / 4 ); } } |
5カラム以上
対応が難しいので、 sec01を複数入れて対応。