はじめに

こんにちは。今日はCSSでレイアウトを作る上で絶対に欠かせないdisplay:flexについてのお話です。

初めのうちはどのようにHTMLを組み立てるべきか難しい…と感じたり、CSSの命令がうまく効かない…など、つまづきやすいところでもあると思います。

一見複雑そうなdisplay:flexですが、ポイントさえ押さえてしまえば使いやすい命令ですので、ぜひこの記事を読み込んで攻略していきましょう。

基本的な考え方

「コンテナ」と「アイテム」でレイアウトを作る

display:flexは「フレックスボックス」と言われる考え方で、「コンテナ」と「アイテム」でレイアウトを作っていきます。
コンテナというのは箱、アイテムはその中に入っている物と考えましょう。

CSSを何も書かない状態だと、通常ブロックレベル要素は上から下に向かって配置されます。
そこでdisplay:flexやそれに関連するプロパティを使い、要素を整列させてレイアウトを作っていきます。

display: flexと一緒に使うプロパティ一覧

それでは、display:flexや関連するプロパティと値についてご紹介していきます。
それぞれ難易度をつけていますが、初めはベースとなる★1をしっかり理解していきましょう。

難易度	命令（プロパティ）	説明
★	display:flex	子要素を並列する
★	justify-content	水平方向の揃え位置を指定
★	align-items	垂直方向の揃え位置を指定
★★	flex-direction	並び順の指定
★★	flex-wrap	折り返しの指定
★★	align-content	子要素が折り返した場合の垂直方向の揃え位置を指定
★★	gap	子要素の間の余白の設定
★★★	flex-basis	子要素のサイズを指定する
★★★	flex-grow	子要素が伸びる割合を指定する
★★★	flex-shrink	子要素が縮む割合を指定する

display: flex

まずこの命令でフレックスボックスを指定します。
display:flexの大きな特徴として、レイアウトを行いたい要素自体に命令を出すのではなく、レイアウトしたい要素を直接囲んでいる親要素に命令を出します。ここがdisplay:flexが難しいとされるポイントの一つでもあります。

冒頭のご説明でコンテナとアイテムでレイアウトを作る、とお話をしましたが、アイテムを整列させるためにそれらを囲んでいるコンテナに命令を出すイメージです。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

justify-content

display:flexとセットで使用し、コンテナ内で並列させた要素の水平方向の揃え方を指定します。
値の種類は以下の通りです。

値	説明
flex-start（初期値）	コンテンツの起点（左端）に揃える
center	コンテンツの中央に揃える
flex-end	コンテンツの終点（右端）に揃える
space-between	コンテンツの間に均等に余白をつける
space-around	コンテンツの左右に均等に余白をつける
space-evenly	コンテンツの前後・間に均等に余白をつける

space-○○プロパティはやや違いがわかりにくいため、以下の図も参照してみてください。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

align-items

display:flexとセットで使用し、コンテナ内で並列させた要素の垂直方向の揃え方を指定します。
値の種類は以下の通りです。

値	説明
stretch（初期値）	一番高さのある要素に合わせる
flex-start	コンテンツの起点（上）に揃える
center	コンテンツの中央に揃える
flex-end	コンテンツの終点（下）に揃える

align-itemsの値の初期値には「stretch」が設定されています。
以下の例は、item1のみ2行のテキストで高さが他のitemと比べて高くなっているのですが、
stretchを指定した場合（何も指定しない場合も同様です）どれも同じ高さになっていると思います。

このように高さの異なる子要素をdisplay:flexを使って並列させた場合、一番高さのある要素に合わせて他の子要素が伸びてしまうという特徴があります。
それを避けたい場合はstretch以外の値を設定し、子要素のサイズに影響しないように注意しましょう。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

flex-direction

display:flexとセットで使用し、コンテナ内で並列させた要素の並べ方を指定します。
値の種類は以下の通りです。

値	説明
row（初期値）	起点（左）から終点（右）に向かって並列する
row-reverse	終点（右）から起点（左）に向かって並列する
column	起点（上）から終点（下）に向かって縦列する
column-reverse	終点（下）から起点（上）に向かって縦列する

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

flex-wrap

display:flexとセットで使用し、コンテナ内で並列させた要素の折り返しについて指定します。
値の種類は以下の通りです。

wrap-reverseは要素全体の順番が反対になるわけではなく、その行ごとに位置が反転するという特徴があります。

値	説明
no-wrap（初期値）	折り返さない
wrap	コンテナの端まで到達したら折り返す
wrap-reverse	コンテナの端まで到達したら折り返す（反対方向）

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

align-content

display:flexとセットで使用し、align-itemsと同じように垂直方向の揃え位置を指定します。
align-itemsと異なる点として、子要素がflex-wrapで折り返した場合、子要素全体を垂直方向のどの位置に揃えるかを指定することができます。
値の種類は以下の通りです。

値	説明
stretch（初期値）	一番高さのある要素に合わせる
flex-start	コンテンツの起点（上）に揃える
center	コンテンツの中央に揃える
flex-end	コンテンツの終点（下）に揃える

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

gap

display:flexで並列させたコンテンツの間の上下・左右の余白を設定することができます。
値には具体的な数値＋単位を設定します。
値は1つもしくは2つの値を設定することができ、2つの場合は先頭の値を上下、後ろが左右の値となります。

あくまでコンテンツの間の余白であり、子要素全体の周りにはgapは発生しません。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

flex-basis

display:flexを親要素に命令し、その子要素にこの命令を出すことで子要素のサイズを指定することができます。
値にはautoや具体的な数値＋単位を設定します。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

なお、flex-directionの値が「row」もしくは「row-reverse」の場合はwidthと同じく横幅を指定でき、
「column」もしくは「column-reverse」の場合はheightと同じく高さを指定するものとなります。

効果としてはwidth・heightプロパティと同じ結果となりますが、それらとflex-basisが両方命令されている場合、flex-basisの値が優先されます。
また、flex-basisは親要素にdisplay:flexが命令されているときだけ使用することができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

flex-grow

display:flexを親要素に命令したときに親要素内で余白が発生する場合、その子要素が伸びる割合を設定することができます。（grow＝成長する）

「サイズ」ではなく「割合」を指定するので、
前述のflex-basisで基本となるサイズを指定しておき、プラスでこのプロパティを指定しておくことで柔軟なレイアウト作成が可能です。

命令は子要素に設定します。
初期値は0で、数値が大きいほど伸びる割合が大きくなります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

flex-shrink

display:flexを親要素に命令したときに子要素のサイズが親要素を超える場合、その子要素が縮む割合を設定することができます。（shrink＝縮む）

以下の3つの例では、itemは全てflex-basis: 40%に設定しています。
40%×3つ＝120%となり親要素の幅を超えていますが、flex-shrink指定なしの場合は親要素に収まるよう均等な大きさに調整されます。

flex-shrinkに1以上の数値を設定することによって、子要素ごとに縮む割合の設定が可能になります。
設定する数値が大きいほど、より縮んでいきます。

さらに、flex-shrinkの値に0を設定した場合縮み率も0となるため、40%をキープします。
結果親要素をはみ出して表示することになります。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

display:flexで作るレイアウト参考例

ここからは、display:flexを使った一般的によく見かけるレイアウト事例についてご紹介します。
命令を使用するシーンがより具体的にイメージできると思います！

headerレイアウト

ごく一般的な左手にサイトロゴ、右手にメニューを配置したレイアウトです。
header全体を1つのコンテナとし、ロゴ・メニューを並列させます。
さらにメニューにもdisplay:flexを使用し並列をさせています。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

見出しのレイアウト

コンテナ・アイテムと考えると大きなレイアウトを作るのものとイメージしがちですが、こういった細かなレイアウトを作成する場合もdisplay:flexが役立ちます。
見出しタグの中で装飾・テキストを整列させる形で使うことも可能です。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

セクションごとに左右反転したレイアウト

同じ構成のコンテンツを反転させて見せるレイアウトです。
flex-directionプロパティを使って特定のコンテナに命令を出すことで実現することができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

記事一覧のレイアウト

このような複数の記事のレイアウトを行う場合もdisplay:flexを使って整列が可能です。
以下の例では一覧する記事数が変わっても常に左寄せにレイアウトするために、justify-content: flex-startを設定し、gapやpaddingを使って余白調整を行っています。

また、タグ一覧が1行あるいは2行の場合でもその下のテキストの開始の高さが揃うよう、
コンテンツを囲んでいるコンテナ（クラスwrap）をflex-direction:columnで縦に整列させ、
タグ全体を囲んでいるコンテナ（ul）に対してflex-basisで高さを設定しています。

コンテンツごとにさらに細かなレイアウト調整を行いたい場合は、display:gridという命令を使うことも可能です。以下の記事で紹介しておりますので、参考にしてみてください。
レイアウト作成のためのdisplay:gridを分かりやすく解説！【初・中級者向け】

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

まとめ

今回の記事ではdisplay:flexについて解説をしました。レイアウト作成のヒントになれば嬉しいです！

STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください！