BACK
|CSS

【CSS-Flex】justify-contentで中央揃えかつ最後の行を左揃えにする方法

CSSのFlexBoxにてjustify-contentで中央揃えをしつつ最後の行だけ左揃えにしたいと思ったときの手段メモです。

justify-content: start;にすると全体が左揃えになるため、どうにかして全体はcenterにしつつ、最後の行だけは、左にしたいと思ったので悩んだ末の今回のやり方を導入しました。

今回は4列での場合を想定して作っていますが完璧では無いです。

実際のコード

解説

flex__boxクラスの疑似要素:afterを使うことで最後に空白のスペースを作る。
そうすることで、7ブロックしか無いが8ブロックあることとなりきれいに中央揃えかつ最後の行は左揃えとなる。

ただ、4列2行の7ブロックだからうまく行ったが4列2行の6ブロックなどでするとやはりレイアウトは崩れる。

静的なページであれば申し分ないが動的なページでは細かな調整が必要になるので用途を考える必要があります。