横並びレイアウトを縦並びに変更するCSS Flexbox実装3パターンまとめ

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

前回レスポンシブな横並びレイアウトをCSS Flexboxで実装する方法で、画面幅に応じてFlexboxを変化させることで横並びのレイアウトをレスポンシブにする方法について紹介しました。

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

2020年8月7日

今回は『画面が広い時は横並び、画面が狭い時は縦一列』という、ランディングページなどでもよく目にするレスポンシブなレイアウトをFlexboxを利用して実装する方法について紹介します。

具体的には以下の3パターンの実装方法を紹介します。実装方法は異なりますが見た目はどれも同じになります。

Flexboxの軸の方向を変える方法

Flexboxはjustify-contentという主軸とalign-itemsという交差軸の2つの軸によって構成されています。

デフォルトでjustify-contentは水平方向の、align-itemsは垂直方向の配置位置を制御するプロパティですが、flex-directionプロパティで主軸と交差軸の方向を変えられます。

以下にFlexboxの軸の方向を変えることでレイアウトを変更するサンプルを用意しました。

ブレークポイントよりも画面が広い時は横並び、狭い時はflex-directionでFlexboxの軸の方向が切り替わるので縦一列のレイアウトになります。

See the Pen
change-flexbox-direction by Toshiharu Nishina (@nishina555)
on CodePen.

flex-directionを利用したレイアウトの変更方法はFlexboxで横並びを実装した場合の王道のパターンです。

Flexboxの設定・解除を切り替える方法

『通常は横並び、画面が狭くなったら縦一列』は『通常は縦一列、画面が広くなったら横並び』と言い換えられます。

ブロック要素のデフォルトの配置位置は縦並びです。
ですので、Flexboxでブロック要素を横並びにする場合、ブレークポイントよりも画面の幅が広くなったタイミングでFlexboxを適用させることで、縦一列を横並びのレイアウトに変更できます。

以下にFlexboxの設定・解除を切り替えるサンプルを用意しました。

ブレークポイントよりも狭い時はFlexboxが解除されているので縦一列、広い時はFlexboxが設定されているので横並びのレイアウトになります。

See the Pen
apply-flexbox-over-breakpoint by Toshiharu Nishina (@nishina555)
on CodePen.

ここで紹介した方法は狭い画面の時のレイアウトを基準にしたアプローチですので、モバイルファーストな設計手法といえます。

『flex-wrap: wrap』を利用する方法

flex-wrapとは配置の折り返しに関するプロパティです。

配置の折り返しが有効になっている場合、Flexboxに収まらなかったアイテムは下段に配置されます。

つまり、Flexboxの配置の折り返しを有効にし、1行に1つだけしか収まらないようにアイテム幅を設定すれば縦一列のレイアウトになります。
折り返しは『flex-wrap: wrap』で有効になります。

以下にflex-wrapを利用したサンプルを作成しました。

ブレークポイントよりも画面が広い時は全アイテムが1行に収まるので横並び、狭い時は1行に1アイテムしか収まらないので縦一列のレイアウトになります。

See the Pen
change-width-in-flexbox-wrap by Toshiharu Nishina (@nishina555)
on CodePen.

flex-wrap: wrapはm x nのタイルレイアウトをレスポンシブにする際にも活躍します。

また、widthを調整することで1行に配置するアイテム数を柔軟に変えられるのも特徴です。
例えば、flex-wrap: wrapであれば『PCの場合は横に4つのアイテムを配置し、スマートフォンの場合は2行2列に変更する』といったことも可能です。

まとめ

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

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