2024.05.30

よく使うflexboxのパターン（レスポンシブ対応）

にゃん花子

記事内に商品プロモーションを含む場合があります

2列や複数行の横並びを制御する、flexbox。よく使うパターンをご紹介するにゃん。

このblogでわかること

Google広告

flexboxの基本的な使い方

flexboxは、親要素に「display: flex;」を宣言し、
子要素を配置するイメージです。

1/* 親要素(コンテナ) */
2.container {
3  display: flex;
4}

子要素については、cssなどでwidthを指定しない場合は、その要素の長さ（例えばテキストであれば文字数）が子要素の大きさとなります。親要素にflexboxを宣言すると、子要素は横並びとなります。

折り返しなどの設定をしない場合、子要素は1列で表示されます。

See the Pen 2列のflexbox by tsucchikimiko (@nyanhanako) on CodePen.

よく使われるプロパティを紹介していきます。まずは子要素の折り返しです。
flex-wrapを指定することで、子要素を任意の範囲で折り返して表示することが可能となります。

See the Pen flexboxの基本 by tsucchikimiko (@nyanhanako) on CodePen.

flex-wrapの設定値

続いて並び順です。flexboxは通常は左→右へ横並びとなりますが、この並び順を反対にすることもできます。

またレスポンシブ対応などで、スマホ表示時は横並びを解除したい場合に、columnを設定することで縦並びに変更できます。

値	説明
row	フレックスコンテナの主軸の方向と起点・終点の位置は、インライン要素と同様になります。（フレックスアイテムは左から右に配置されます。）
row-reverse	フレックスコンテナの主軸はrowと同じ方向に指定されますが、起点・終点の位置は逆になり、フレックスアイテムは逆向きに配置されます。（右から左）
column	フレックスコンテナの主軸の方向と起点・終点の位置は、ブロック要素と同様になります。（フレックスアイテムは上から下に配置されます。）
column-reverse	フレックスコンテナの主軸はcolumnと同じ方向に指定されますが、起点・終点の位置は逆になり、フレックスアイテムは逆向きに配置されます。（下から上）

flex-directionの設定値

続いて、水平方向と・垂直方向の位置を指定します。
下記の例は、水平・垂直共にcenter揃えです。（わかりやすいように、子要素の高さを凸凹に設定しています）

水平方向の位置を指定するには、justify-contentを使用します。
通常は左端揃えに子要素が配置されますが、justify-contentを使用することで、センタリングや右端揃えが指定できます。

また親要素のwidth内で、子要素を自動的にバランスよく配置してくれる設定値として、space-betweenやspace-aroundも用意されています。

値	説明
flex-start（初期値）	子要素アイテムを左揃えで配置
flex-end	子要素アイテムを右揃えで配置
center	子要素アイテムを中央揃えで配置
space-between	最初と最後の子要素アイテムを両端に配置し、残りの要素は均等に間隔をあけて配置
space-around	両端の子要素アイテムも含め、均等に間隔をあけて配置

justify-contentの設定値

垂直方向の位置を指定するには、align-itemsを使用します。子要素の高さが違う場合に、どのラインを基準として横並びにするか？を指定することができます。
何も指定しない場合は、stretchが指定されており、親要素の高さに合わせて、子要素はの高さは自動的に伸び縮みします。

子要素ごとの高さを保ちつつ、横並びしたい場合は、align-itemsの設定値を変更します。

align-itemsの設定値