東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

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

2021.06.20 Posted by

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

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

 

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

 

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

 

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

2カラムの場合

col2_01

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

 

3カラムの場合

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

col3_2_01

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

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

col3_3_03

 

4カラムの場合

col4_01

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

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

 

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

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

 

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

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278