[コーディングの応用] どうしても覚えてほしいレイアウトを簡単に組む方法!Flexbox

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

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

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

Flexboxに限ったことではありませんが、html・cssコーディングは、
基本的に初期状態は「左から始まり右に終わる」そして「上から始まり下に終わる」ことを覚えておいてください。

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

Flexboxとは

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

例えば以下のようなhtml・cssコーディングを行ったとします。

See the Pen Flexboxの基本構成 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

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

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

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

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

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

Flexboxの原理「軸」

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

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

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

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

flex-direction

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

Flexboxは「フレックスコンテナ」と「フレックスアイテム」の親子関係で成り立ちますが、
主軸方向に描画されたフレックスアイテムが、フレックスコンテナの横幅や高さに収まりきらない場合のレイアウトは、
アイテムを折り返して表示するかどうかがポイントになります。
折り返しの有無を「flex-wrap」というプロパティで指定を行い、初期値は「折り返さない:nowrap」です。

flex-wrap

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」プロパティはFlexboxのプロパティの中で特に難解なのものひとつで、
この「justify-content」を理解できるかどうかがコーディングスキルのふるいにかけられるかどうかのポイントになります。

justify-content

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

「align-items」はフレックスアイテムの行内での交差軸方向の揃え方の指定です。
前述した「justify-content」が横方向なら「align-items」は縦方向、
「justify-content」が縦方向なら「align-items」は横方向になります。

align-items

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

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

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

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

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

align-content

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

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

gap