レスポンシブな横並びレイアウトをCSS Flexboxで実装する方法

HTML/CSS

こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。

前回、CSS Flexboxによる中央寄せ横並びレイアウトの実装3パターン比較で『中央寄せ横並びのレイアウト』をFlexboxで実装する方法について紹介しました。

CSS Flexboxによる中央寄せ横並びレイアウトの実装3パターン比較

しかし上記の記事で紹介した具体例はFlexboxが固定長であるため、レスポンシブなレイアウトではありませんでした。

そこで今回はアイテムの幅が画面の幅に応じて動的に変わるレスポンシブなレイアウトをFlexboxで実装する方法について紹介します。
Flexboxの設定値のうち、centerを利用した方法とspace-betweenを利用した方法の合計2パターン紹介します。

レスポンシブ対応させる具体例には前回実装した『200pxのアイテムを20px間隔で配置されたレイアウト』を利用します。

『justify-content: center』を利用する場合

Flexboxのwidthを相対比にすることでレスポンシブなレイアウトになります。

アイテムを事前に指定した固定長で配置できる場合は固定長での中央寄せになります。
今回の場合ですと固定長は200pxになります。

一方、固定長で配置できない場合はFlexboxの幅とアイテム同士の間隔をもとにアイテム幅が自動で調整されます。
今回の場合ですと200pxのアイテムを横並びに3つ配置できる幅がFlexboxになければアイテム幅が調整されます。

See the Pen
variable-with-center
by Toshiharu Nishina (@nishina555)
on CodePen.

『justify-content: space-between』を利用する場合

justify-content: space-betweenでレスポンシブなレイアウトにする場合は以下の2つを設定します。

space-betweenを利用したレスポンシブ対応
  • Flexboxの`width`を相対比で表現
  • アイテムの`width`をFlexboxに対する相対比で表現

今回の例におけるアイテムのwidthの相対比は、Flexboxのwidth640pxに対してアイテムのwidth200pxだったので 100% x 200/640 = 31.25% になります。

See the Pen
variable-with-space-between
by Toshiharu Nishina (@nishina555)
on CodePen.

まとめ

以上でFlexboxによるレスポンシブな横並びレイアウトの実装方法の紹介を終わります。

今回のまとめ
  • Flexboxを相対比で表現するとレスポンシブなレイアウトになる
  • space-betweenでレスポンシブなレイアウトを実装する場合はアイテム幅も相対比にする

この記事がいいなと思いましたらTwitter(@nishina555)のフォローもよろしくお願いします!