[コーディングの応用] どうしても覚えてほしいレイアウトを簡単に組む方法!フレックスボックス(flexbox)

まずはフレックスボックスの定義について考えていきましょう。
本日は以下のページを参考に解説を進めていきます。

CSS Flexboxの使い方をどこよりも詳しく解説!図解やサンプルもあり! | 模写修行メディア

はじまりと終わり～〇〇から〇〇へ～

こちらはフレックスボックスに限ったことではありませんが、
初期値のみを指定したhtml・cssコーディングによってもたらされる表示は、
基本的に「左から始まり右に終わる」そして「上から始まり下に終わる」ことを覚えておいてください。

そして今回は「初期値」という言葉が頻繁に出てきますが「特に値を指定していない」状態を指します。
初期値と特定の指定による変化をよく確認してください。

フレックスボックスとは

フレックスボックスはレイアウトに特化したdisplayプロパティです。
「display: flex;」を指定したボックスを親として内包する子要素が単数もしくは複数存在する場合に真価を発揮し、要素を横並びにレイアウト、かつ余白などの調整を簡単に行えるという特徴があります。

例えば以下のようなhtmlのコードがありcssは以下のように記述を行ったとします。

See the Pen フレックスボックスの基本構成 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

すると表示されるレイアウトは以下の画像のようになります。

これがフレックスボックスの基本形となります。
横並びにしたい子要素を持つ親要素のセレクタに「display: flex;」を指定して「フレックスコンテナ」にするだけで、子要素が「フレックスアイテム」になり、非常に簡単に横並びのレイアウトを実現できます。

この基本形から親要素と子要素それぞれにフレックスボックス用のcss指定を追加で行うことで、
様々なレイアウトを簡単に実現することが可能となります。

今回は親要素に指定するプロパティと値の書き方・使い方を詳しく解説していきますが、
基本的にフレックスボックスは親要素にのみ指定をしてもレイアウトを実現できるため、
子要素のプロパティは必要になった時に調べればよいというレベルであり、今後も紹介することはないかと思います。

なお以前「インライン要素も横並びになる」というお話はしましたが、
フレックスボックスはインライン要素とは違い、横幅と高さを保ってくれます。

フレックスボックスの原理「軸」

フレックスボックスのレイアウトを知るうえで前提になるのが「軸」という概念の理解です。
さらに軸にも「主軸」と「交差(クロス)軸」の2種類があります。
この概念は「内側・外側」や「囲う」「ブラウザ幅・コンテンツ幅」と同様の重要度になります。

今回は「軸」を元に解説を行っていきます。

主軸は「横」か「縦」か(使用プロパティ:flex-direction)

「主軸」は子要素の並ぶ方向を指しており「横方向」と「縦方向」のどちらかに決めます。
「主軸」をどちらかに決めたことで、自動的に「交差軸」が交差した方向に決まります。
なお「主軸」は「flex-direction」というプロパティで指定を行い、初期値は「横:row」です。

プロパティ・値の説明

プロパティ	指定の効果	値
flex-direction	フレックスコンテナの主軸の方向を指定	row(初期値)・row-reverse・ column・column-reverse

値に「row」もしくは「row-reverse」を指定すると「主軸」は横方向、「交差軸」は縦方向になり、
「column」もしくは「column-reverse」を指定すると「主軸」は縦方向、「交差軸」は横方向になります。

flex-direction(主軸横/初期値)・・・フレックスコンテナの主軸を横方向に並べる

See the Pen flex-direction by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

flex-direction(主軸縦)・・・フレックスコンテナの主軸を縦方向に並べる

See the Pen プロパティ:flex-direction(主軸は縦方向) by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

プロパティ「flex-direction」の値によるそれぞれの挙動は以下でも確認できます。

flex-directionプロパティの値による挙動の違い
CSS Demo: flex-direction (mozilla.net)

フレックスアイテムを折り返すのか(使用プロパティ:flex-wrap)

フレックスボックスは「フレックスコンテナ」と「フレックスアイテム」の親子関係で成り立ちますが、主軸方向に描画されたフレックスアイテムが、フレックスコンテナの横幅や高さに収まりきらない場合のレイアウトは、アイテムを折り返して表示するかどうかがポイントになります。

折り返しの有無を「flex-wrap」というプロパティで指定を行い、初期値は「折り返さない:nowrap」です。

プロパティ・値の説明

プロパティ	指定の効果	値
flex-wrap	フレックスアイテムがフレックスコンテナの横幅や高さを超えたら折り返すかを指定	nowrap(初期値)・wrap・wrap-reverse

値に「nowrap」を指定すると折り返さずに縮小して表示し、
「wrap」を指定すると1行目に収まりきらない場合は続きを2行目から表示し、
「wrap-reverse」を指定すると「wrap」の表示を逆方向から再現します。

flex-wrap・・・フレックスアイテムを折り返すのかどうか

上記のそれぞれの値の挙動をCodePenで見てみましょう。
変化がなければブラウザウィンドウの横幅を縮めてみてください。

See the Pen プロパティ:flex-wrap(主軸は縦方向) by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

プロパティ「flex-wrap」の値によるそれぞれの挙動は以下でも確認できます。

flex-wrapプロパティの値による挙動の違い
CSS Demo: flex-wrap(mozilla.net)

flex-directionとflex-wrapをまとめて指定(使用プロパティ:flex-flow)

上記「flex-direction」と「flex-wrap」は、
「flex-flow」という1つのプロパティでまとめて記述することができます。
こちらは記述例と値の挙動だけ見ておきましょう。

flex-flowプロパティの値による挙動の違い
CSS Demo: flex-flow(mozilla.net)

フレックスアイテムの主軸方向の揃え方を指定(使用プロパティ:justify-content)

「justify-content」はフレックスアイテムの主軸方向の揃え方を指定するもので、
フレックスアイテムをどこからどのように描画するのかを指定します。

おそらく「justify-content」プロパティはフレックスボックスのプロパティの中で最も難解で、
この「justify-content」を理解できるかどうかがひとつのラインになります。

プロパティ・値の説明

プロパティ	指定の効果	値
justify-content	フレックスアイテムの主軸方向の揃え方を指定	flex-start(初期値)・flex-end・center・space-between・space-around

値に「flex-start」を指定すると主軸起点に揃え、左端から配置され、
「flex-end」を指定すると主軸終点に揃え、右端から配置され、
「center」を指定すると主軸中央に揃え、中央から配置されます。

また「space-between」を指定すると主軸幅全体に揃え、余白をもって等間隔で配置され、
「space-around」を指定すると主軸幅全体に揃え、余白をもって等間隔かつ起点・終点との間にも間隔付きで配置されます。

なお「space-between」の指定で余白が発生しない場合はflex-startと同様の表示で、
「space-around」の指定で余白が発生しない場合はcenterと同様の表示になります。

justify-content・・・フレックスアイテムの主軸方向の揃え方を指定

See the Pen プロパティ:justify-content by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

プロパティ「justify-content」の値によるそれぞれの挙動は以下でも確認できます。

justify-contentプロパティの値による挙動の違い
CSS Demo: justify-content(mozilla.net)

フレックスアイテムの行内での交差軸方向の揃え方を指定(使用プロパティ:align-items)

「align-items」はフレックスアイテムの行内での交差軸方向の揃え方の指定です。

プロパティ・値の説明

プロパティ	指定の効果	値
align-items	フレックスアイテムの行内での交差軸方向の揃え方を指定	stretch(初期値)・flex-start・flex-end・center・baseline

値に「stretch」を指定するとアイテムどうしの高さを揃え、
「flex-start」を指定すると交差軸の上部(先頭)に揃え、
「flex-end」を指定すると交差軸の下部(末尾)に揃え、
「center」を指定すると交差軸の中央に揃え、
「baseline」を指定すると交差軸のベースラインに揃います。

align-items・・・フレックスアイテムの交差方向の揃え方を指定

See the Pen プロパティ:align-items by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

プロパティ「align-items」の値によるそれぞれの挙動は以下でも確認できます。

align-itemsプロパティの値による挙動の違い
CSS Demo: align-items(mozilla.net)
※start・・・flex-start、end・・・flex-endです。

フレックスコンテナの枠全体の交差軸方向の揃え方を指定(使用プロパティ:align-content)

「justify-content」は主軸方向の揃え方の指定でしたが、
この「align-content」はフレックスコンテナの枠全体の交差軸方向の揃え方の指定です。
基本的に高さが固定の場合などに使用することがあります。
交差軸ならではの配置方法が出てきます。

また前述の「align-items」は非常によく似たプロパティですが、
「align-items」はコンテナ行内での整列方法の指定で、
「align-content」は内部の枠全体の整列方法の指定です。

参考:align-items と align-content の違い : CSS Tips | iPentec

プロパティ・値の説明

プロパティ	指定の効果	値
align-content	フレックスコンテナの枠全体の交差軸方向の揃え方を指定	stretch(初期値)・flex-start・flex-end・center・space-between・space-around

値に関しては「justify-content」と同様になるため割愛します。

align-content・・・フレックスコンテナの枠全体の交差軸方向の揃え方を指定

See the Pen プロパティ: align-content by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

プロパティ「align-content」の値によるそれぞれの挙動は以下でも確認できます。

align-contentプロパティの値による挙動の違い
CSS Demo: align-content(mozilla.net)
※start・・・flex-startです。

フレックスアイテム同士の余白を具体的数値で指定(使用プロパティ:gap)

「gap」はフレックスアイテム同士の余白を具体的な数値で指定することができます。
実案件では「gap」の使用頻度がかなり高く、<ul></ul>タグなどはほとんど「gap」の指定をしてます。

プロパティ・値の説明

プロパティ	指定の効果	値
gap	フレックスアイテム同士の余白を具体的数値で指定	数値

数値を1つだけ指定すると上下左右に、2つ指定すると上下・左右の余白になります。

gap・・・フレックスアイテム同士の余白を具体的数値で指定

See the Pen プロパティ:gap by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

プロパティ「gap」の値によるそれぞれの挙動は以下でも確認できます。

gapプロパティの値による挙動の違い
CSS Demo: gap(mozilla.net)