図で理解する Flexbox

図で理解するFlexbox

Flexboxは複雑なレイアウトを組み立てるために必要となる機能です。
ですが、文章だけではFlexboxの仕組みや使い方を理解しづらい部分があるのも事実です。

そこで、Flexboxの仕組みや使い方を図で視覚的に説明します。
Flexboxを使いこなして、様々なレイアウトを組み立てられるようになりましょう。

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プロパティで設定できます。
値には8px1remのようにサイズを指定できます。

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

Flex Grow / Shrink / Basis

Flex Grow

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

.item {
    flex-grow: 2;
}

Flex Shrink

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

.item {
    flex-shrink: 2;
}

Flex Basis

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

.item {
    flex-basis: 64px;
}

Flex

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

  • 値1つ
    • 1つ目はflex-growの値となる
  • 値2つ
    • 1つ目はflex-growの値となる
    • 2つ目が64px8remなどサイズを指定した場合はflex-basisの値となる
    • 2つ目が10.5など数値を指定した場合はflex-shrinkの値となる
  • 値3つ
    • 1つ目はflex-growの値となる
    • 2つ目はflex-shrinkの値となる
    • 3つ目は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-contentjustify-contentplace-contentプロパティで一括指定できます。
1つ目の値はalign-contentの値を指定し、2つ目の値はjustify-contentの値を指定します。

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