Zenn
🐥

図で理解する Flexbox

2021/08/14に公開
CSS
HTML
tech

Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。
仕組み・使い方を理解しようと思い、図を使って整理してみた。

※ CSS Grid についても整理してみました
https://zenn.dev/umatoma/articles/b970bdd3a148cd

Flexbox

Flexboxは縦・横に要素を並べられるレイアウト方法です。
Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央寄せ・上寄せなど細かな位置も調整できます。

コンテナ・アイテム

Flexboxを使う上で必要となる要素が「Flexコンテナ」と「Flexアイテム」です。
Flexコンテナの中にFlexアイテムを複数並べてレイアウトします。

<div class="container">
   <div class="item">１</div>
   <div class="item">２</div>
   <div class="item">３</div>
   <div class="item">４</div>
   <div class="item">５</div>
</div>

Flexコンテナとして扱いたいHTMLタグに対して、display: flex;を設定します。
また、Flexコンテナ内に並んでいる要素は自動的にFlexアイテムとして扱われます。
そのため、明示的にCSSを設定する必要はありません。

.container {
   display: flex;
}

主軸・交差軸

FlexboxではFlexアイテムを左右に並べたり、上下に並べたりできます。
このFlexアイテムを並べる方向を「主軸」と呼びます。
また、主軸に対して垂直方向の軸を「交差軸」と呼びます。

※ アラビア語など言語設定に応じて軸の向きが逆転する場合もありますが、ここでは日本語や英語が使われる前提で話を進めます。

justify・align・content・items・self

Flexboxの各プロパティ名で使われている用語は次のような関係になっています。

  • justify：主軸方向を調整
  • align：交差軸方向を調整
  • self：単一のFlexアイテム
  • items：各行のFlexアイテム
  • content：Flexアイテム全体

Flex Direction / Wrap

Flex Direction

Flexアイテムを並べる方向はflex-directionプロパティで設定できます。

  • row：左から右に並べる
  • row-reverse：右から左に並べる
  • column：上から下に並べる
  • column-reverse：下から上に並べる
.container {
    display: flex;
    flex-direction: row;
}

Flex Wrap

Flexアイテムの折り返しはflex-wrapプロパティで設定できます。

  • nowrap：折り返さない
  • wrap：折り返す
  • wrap-reverse：逆方向に折り返す
.container {
    display: flex;
    flex-wrap: nowrap;
}

Order

Flexアイテムの表示順はorderプロパティで設定できます。
値には-1,0,1,2のように数値を指定でき、数値の小さい方から順番に表示されます。

.item {
    order: 3;
}

Gap

Flexアイテム間の余白はgapプロパティで設定できます。
値には8px・1remのようにサイズを指定できます。

.container {
    display: flex;
    gap: 8px;
}

Flex Grow / Shrink / Basis

Flex Grow

Flexアイテムを主軸に対してどの様に伸縮させるかはflex-growプロパティで指定できます。
値には1・0.5のように数値を指定でき、各Flexアイテムに設定された数値の比率によって、どの様に伸縮するかが決まります。

.item {
    flex-grow: 2;
}

Flex Shrink

Flexアイテムを主軸に対してどの様に縮小させるかはflex-shrinkプロパティで指定できます。
値には1・0.5のように数値を指定でき、各Flexアイテムに設定された数値の比率によって、どの様に縮小するかが決まります。
ただし、全Flexアイテムのサイズが、Flexコンテナのサイズを超える場合のみ有効となります。

.item {
    flex-shrink: 2;
}

Flex Basis

Flexアイテムの主軸に対するサイズはflex-basisプロパティで指定できます。
値には8px・1remのようにサイズを指定を指定できます。
また、width・heightを同時に設定している場合は、flex-basisが優先されます。

.item {
    flex-basis: 64px;
}

Flex

flex-grow・flex-shrink・flex-basisはflexプロパティで一括指定できます。
指定する値の数などに応じて解釈が変わります。

  • 値１つ
    • １つ目はflex-growの値となる
  • 値２つ
    • １つ目はflex-growの値となる
    • ２つ目が64px・8remなどサイズを指定した場合はflex-basisの値となる
    • ２つ目が1・0.5など数値を指定した場合はflex-shrinkの値となる
  • 値３つ
    • １つ目はflex-growの値となる
    • ２つ目はflex-shrinkの値となる
    • ３つ目はflex-basisの値となる
.item {
    flex: 1;
}

Justify Content

Justify Content

「Flexアイテム全体」の「主軸」に対する配置はjustify-contentプロパティで指定できます。

  • flex-start：先頭側に配置
  • flex-end：末尾側に配置
  • center：中央に配置
  • space-between：均等に配置
    • コンテナとアイテム間の余白なし
  • space-around：均等に配置
    • コンテナとアイテム間の余白は、隣接するアイテム間の余白の半分になる
  • space-evenly：均等に配置
    • コンテナとアイテム間の余白は、隣接するアイテム間の余白と同じになる
.container {
    display: flex;
    justify-content: flex-start;
}

Align Content / Items / Self

Align Content

「Flexアイテム全体」の「交差軸」に対する配置はalign-contentプロパティで指定できます。

  • flex-start：先頭側に配置
  • flex-end：末尾側に配置
  • center：中央に配置
  • space-between：均等に配置
    • コンテナとアイテム行間の余白なし
  • space-around：均等に配置
    • コンテナとアイテム行間の余白は、隣接するアイテム行間の余白の半分になる
  • space-evenly：均等に配置
    • コンテナとアイテム行間の余白は、隣接するアイテム行間の余白と同じになる
.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

Align Items

「各行のFlexアイテム」の「交差軸」に対する配置はalign-itemsプロパティで指定できます。

  • flex-start：先頭側に配置
  • flex-end：末尾側に配置
  • center：中央に配置
  • baseline：各アイテムのベースライン（テキストの位置）が同じになるよう配置
  • stretch：各アイテムのサイズが同じになるよう配置
.container {
    display: flex;
    align-items: flex-start;
}

Align Self

「単一のFlexアイテム」の「交差軸」に対する配置はalign-selfプロパティで指定できます。
align-selfが設定されている場合は、align-itemsの値が上書きされます。

  • flex-start：先頭側に配置
  • flex-end：末尾側に配置
  • center：中央に配置
  • stretch：各アイテムのサイズが同じになるよう配置
.item {
    align-self: flex-start;
}

Place Content

Place Content

align-content・justify-contentはplace-contentプロパティで一括指定できます。
１つ目の値はalign-contentの値を指定し、２つ目の値はjustify-contentの値を指定します。

.container {
    place-content: flex-start flex-end;
}

まとめ

Flexboxについて整理できた。
グリッドレイアウトもいまいち理解してないので、整理してみたいと思う。

FlexboxとGrid Layoutを使ったCSSレイアウト入門

FlexboxとGrid Layoutを使ったCSSレイアウトに関して書籍にまとめました。

作って学ぶWebサイト制作

情報を整理するついでに、Webサイト制作の入門サイトを作っています。
よかったらご利用ください。

https://web-study.dev/

Discussion