前回、よく見る『中央寄せ横並びレイアウト』を3パターンのCSS Flexboxで実装してみるで『中央寄せ横並びのレイアウト』をFlexboxで実装する方法について紹介しました。
しかし上記の記事で紹介した具体例は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つを設定します。
- 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)やってます。フォローしてもらえるとうれしいです！