【CSS】Flexboxのspace-betweenで3カラム以上でもfleat:leftと同じような左詰めのレイアウトにする方法

こんにちはウェブラボクリエイターズメモです。

この記事のアイキャッチの様なカラムレイアウトを組む際、従来ではfloatを用いたりdisplay:inline-blockを用いて横並びにすることが多かったと思います。

しかし最近では多くのブラウザでFlexboxへの対応が進み、Flexboxを使えばmatchHeight(横並びの高さを揃える)処理が必要なく、順番の入れ替えも自由でレスポンシブ対応にも便利なため、筆者もガンガン用いています。

そしてこのようなカラムレイアウトを組む際、子要素に左右のマージンを指定するとはみ出してしまうため、
例えば3カラムであればli:nth-child(3n){margin-right:0;}のようにして右端に来る子要素のマージンを消してあげる処理が必要です。

一方でFlexboxにはjustify-content: space-between;という便利なプロパティがあります。
これを駆使し、nth-childの処理を使わない方法をご紹介します。

2カラムの場合

2カラムの場合は以下のようなコードだけでレイアウトを作れます。

3カラムの場合

3カラムの場合、space-betweenを使うと子要素が5個とかの場合こんな風になってしまいます。

ここで、今回ご紹介する処理がこちら。

すると、このように最後に架空の要素が挿入され、これが何個のときでもうまいこといきます。

4カラムの場合

4カラムの場合、3カラムに加えて疑似要素の::beforeも追加してあげます。
ただし、beforeだと先頭に入ってしまうので、ここでFlexboxの子要素に指定できる「order」を使って一番うしろに持ってきます。

これまた、何個のときでもうまいこといきます。

5カラム以上の場合・・・

この方法では理論上、nカラムのときn-2個の疑似要素が必要になるため、これ以上は疑似要素だけではできません。
おとなしく、nth-child(5n)を使いましょう。
(その際justify-contentは指定無しにしてあげましょう)

結局のところ、CSSの文字数はnth-childのほうが少ない気もしますが、この方法が良かった！という場面があることを願います。
以上、クリエイターズメモでした。