CSS Flexbox の基礎知識と使い方をやさしく解説

Post on:2019年3月27日

CSS Flexboxとは、柔軟なレイアウトを実現できるCSSの新しいレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。

CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。

A Visual Guide to CSS3 Flexbox Properties

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

【アップデート: 2019年3月27日】
Flexboxの解説を2019年の現状にあわせて、修正しました。
【アップデート: 2018年3月27日】
主要なブラウザすべてにサポートされたため、記述をそれに合わせました。
【アップデート: 2018年7月10日】
4つ前のバージョンまで対応したプレフィックスも記しました。

CSS flexboxとは

CSS flexboxの各プロパティを見る前に、flexboxとはどんなものか説明します。flexboxを使ったレイアウトとは、flexアイテムと呼ばれる複数の子要素を内包するflexコンテナの親要素で構成されています。

上の図はflexレイアウトの概要と各プロパティで、さらに多くの情報はW3Cのflexbox modelを参考にしてください。

CSS flexboxは2009年の最初のドラフトから何度も変化しましたが、ここでは機能している最新のドラフト（CSS Flexible Box Layout Module Level 1: 2018年11月）をベースにします。

CSS flexboxのブラウザのサポート状況

Internet Explorer 11+（10はプレフィックス「-ms-」が必要）
Edge 12+
Chrome 29+（21-28まではプレフィックス「-webkit-」が必要）
Firefox 28+（2-21まではプレフィックス「-moz-」が必要）
Opera 17+（15-16まではプレフィックス「-webkit-」が必要）
Safari 9+（6.1-8まではプレフィックス「-webkit-」が必要）
Android 4.4+（2.1-4.3はプレフィックス「-webkit-」が必要）
iOS Safari 9+（7-8.4まではプレフィックス「-webkit-」が必要）

詳しいサポート状況は、下記ページをご覧ください。

flexのサポート状況 -Can I Use

CSS flexboxの使い方

CSS flexboxを使うのは簡単です。
HTMLの親要素に「display: flex;」を指定するだけです。

.flex-container {
  display: flex;
}

.flex-container {

display: flex;

}

プレフィックス版として、最新バージョンの4つ前まで対応したプレフィックスも記しておきます。

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-container {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

}

もしくは、インライン要素に使うのであれば「inline-flex」を指定します。

.flex-container {
  display: inline-flex;
}

.flex-container {

display: inline-flex;

}

.flex-container {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.flex-container {

display: -webkit-inline-box;

display: -ms-inline-flexbox;

display: inline-flex;

}

「display: flex;」もしくは「display: inline-flex;」は親要素に加える必要がある唯一のプロパティです。その子要素は自動的にflexアイテムになります。

CSS flexboxは、2種類のプロパティで考えると簡単

CSS flexboxのプロパティを分類する方法はいくつかあります。ここでは最も簡単な方法として、一つはflexコンテナ、一つはflexアイテム、と二つのグループに分けてその使い方を説明します。

flexコンテナとは、flexアイテムを含む親要素です。まずは、flexコンテナの使い方から解説します。

flexコンテナ: flex-direction（横並びと縦並び）

「flex-direction」プロパティは、flexコンテナの主軸の方向を設定することにより、flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。

flex-directionプロパティで利用できる値

flex-direction: row;（デフォルト値）
左から右へ（ltr）水平方向に配置（dir属性で定義、デフォルトはltr）。
flex-direction: row-reverse;
rowと逆、右から左へ（rtl）水平方向に配置。
flex-direction: column;
上から下へ垂直方向に配置。
flex-direction: column-reverse;
columnと逆、下から上へ垂直方向に配置。

.flex-container {
  flex-direction: row;
}

.flex-container {

flex-direction: row;

}

.flex-container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
}

.flex-container {

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

}

flexアイテムは左から右へ（ltr）水平方向に配置されます。

.flex-container {
  flex-direction: row-reverse;
}

.flex-container {

flex-direction: row-reverse;

}

.flex-container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
     -ms-flex-direction: row-reverse;
         flex-direction: row-reverse;
}

.flex-container {

-webkit-box-orient: horizontal;

-webkit-box-direction: reverse;

-ms-flex-direction: row-reverse;

flex-direction: row-reverse;

}

flexアイテムは右から左へ（rtl）水平方向に配置されます。

.flex-container {
  flex-direction: column;
}

.flex-container {

flex-direction: column;

}

.flex-container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
}

.flex-container {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

}

flexアイテムは上から下へ垂直方向に配置されます。

.flex-container {
  flex-direction: column-reverse;
}

.flex-container {

flex-direction: column-reverse;

}

.flex-container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
     -ms-flex-direction: column-reverse;
         flex-direction: column-reverse;
}

.flex-container {

-webkit-box-orient: vertical;

-webkit-box-direction: reverse;

-ms-flex-direction: column-reverse;

flex-direction: column-reverse;

}

flexアイテムは下から上へ垂直方向に配置されます。

「flex-direction」のデフォルト値: row

「row」と「row-reverse」はライティングモードに依存するので、rtlの環境だとそれぞれ逆に配置されます。

flexコンテナ: flex-wrap（単一行と複数行の指定）

flexboxの初期のコンセプトは、1行に複数のアイテムをコンテナにセットすることです。そこから進化し、「flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。

flex-wrapプロパティで利用できる値

flex-wrap: nowrap;（デフォルト値）
単一行に配置、アイテムは幅に収まるように縮小される。
flex-wrap: wrap;
複数行に配置、左から右へ、上から下へ、の順番に。
flex-wrap: wrap-reverse;
複数行に配置、左から右へ、下から上へ、の順番に。

.flex-container {
  flex-wrap: nowrap;
}

.flex-container {

flex-wrap: nowrap;

}

.flex-container {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.flex-container {

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

}

flexアイテムは横一行に配置されます。各アイテムの幅はflexコンテナの幅に収まるように縮小されます。

.flex-container {
  flex-wrap: wrap;
}

.flex-container {

flex-wrap: wrap;

}

.flex-container {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.flex-container {

-ms-flex-wrap: wrap;

flex-wrap: wrap;

}

flexアイテムは横複数行に配置されます。必要があれば、左から右へ、上から下へ、の順番に配置されます。

.flex-container {
  flex-wrap: wrap-reverse;
}

.flex-container {

flex-wrap: wrap-reverse;

}

.flex-container {
  -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse;
}

.flex-container {

-ms-flex-wrap: wrap-reverse;

flex-wrap: wrap-reverse;

}

flexアイテムは横複数行に配置されます。必要があれば、左から右へ、下から上へ、の順番に配置されます。

「flex-wrap」のデフォルト値: nowrap

これらのプロパティはライティングモードに依存するので、rtlの環境だとそれぞれ逆に配置されます。

flexコンテナ: flex-flow（並びと単一・複数行を一緒に定義）

「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンドです。

flex-flowプロパティで利用できる値

flex-flow: row nowrap（デフォルト値）
flex-directionの「row」とflex-wrapの「nowrap」を一緒に定義。

.flex-container {
  flex-flow: <flex-direction> || <flex-wrap>;
}

.flex-container {

flex-flow: <flex-direction> || <flex-wrap>;

}

.flex-container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          -ms-flex-flow: row nowrap;
              flex-flow: row nowrap;
}

.flex-container {

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-ms-flex-flow: row nowrap;

flex-flow: row nowrap;

}

「flex-flow」のデフォルト値: row nowrap

flexコンテナ: justify-content（寄せと間隔）

「justify-content」プロパティは、flexコンテナの主軸に沿ってflexアイテムを一行に配置します。

justify-contentプロパティで利用できる値

justify-content: flex-start;（デフォルト値）
アイテムを先頭に寄せて配置。
justify-content: flex-end;
アイテムを後尾に寄せて配置。
justify-content: center;
アイテムを中央に寄せて配置。
justify-content: space-between;
先頭と後尾は端に、残りは等間隔に配置。
justify-content: space-around;
すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔。
justify-content: space-evenly;
すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔。
justify-content: stretch;
すべてのアイテムを等間隔に配置。サイズがautoであるアイテムはコンテナに合わせて引き延ばす。

.flex-container {
  justify-content: flex-start;
}

.flex-container {

justify-content: flex-start;

}

.flex-container {
  -webkit-box-pack: start;
     -ms-flex-pack: start;
   justify-content: flex-start;
}

.flex-container {

-webkit-box-pack: start;

-ms-flex-pack: start;

justify-content: flex-start;

}

flexアイテムはモードに従い、flexコンテナの左側に配置されます。

.flex-container {
  justify-content: flex-end;
}

.flex-container {

justify-content: flex-end;

}

.flex-container {
  -webkit-box-pack: end;
     -ms-flex-pack: end;
   justify-content: flex-end;
}

.flex-container {

-webkit-box-pack: end;

-ms-flex-pack: end;

justify-content: flex-end;

}

flexアイテムはモードに従い、flexコンテナの右側に配置されます。

.flex-container {
  justify-content: center;
}

.flex-container {

justify-content: center;

}

.flex-container {
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
}

.flex-container {

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

}

flexアイテムはflexコンテナの中央に配置されます。

.flex-container {
  justify-content: space-between;
}

.flex-container {

justify-content: space-between;

}

.flex-container {
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}

.flex-container {

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

}

flexアイテムは最初と最後のアイテムは端に、残りは等間隔で配置されます。

.flex-container {
  justify-content: space-around;
}

.flex-container {

justify-content: space-around;

}

.flex-container {
  -ms-flex-pack: distribute;
justify-content: space-around;
}

.flex-container {

-ms-flex-pack: distribute;

justify-content: space-around;

}

flexアイテムは全てのアイテムは等間隔に配置されます。

「justify-content」のデフォルト値: flex-start

flexコンテナ: align-items（アイテムの配置方法）

flexアイテムはflexコンテナのクロス軸に垂直方向で配置することができます。「align-items」プロパティは、デフォルトで全てのflexアイテムを含めます。
※flexアイテム: align-selfが定義してあれば、align-itemsは上書きされます。

align-itemsプロパティで利用できる値

align-items: stretch;（デフォルト値）
アイテムをコンテナの高さ（または幅）いっぱいに配置。
align-items: flex-start;
アイテムを先頭にまとめて配置。
align-items: flex-end;
アイテムを後尾にまとめて配置。
align-items: center;
アイテムを中央にまとめて配置。
align-items: baseline;
アイテムをベースラインに沿って配置。

.flex-container {
  align-items: stretch;
}

.flex-container {

align-items: stretch;

}

.flex-container {
  -webkit-box-align: stretch;
     -ms-flex-align: stretch;
        align-items: stretch;
}

.flex-container {

-webkit-box-align: stretch;

-ms-flex-align: stretch;

align-items: stretch;

}

flexアイテムはflexコンテナの高さ（または幅）いっぱいに配置されます。

.flex-container {
  align-items: flex-start;
}

.flex-container {

align-items: flex-start;

}

.flex-container {
  -webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
}

.flex-container {

-webkit-box-align: start;

-ms-flex-align: start;

align-items: flex-start;

}

flexアイテムはflexコンテナのクロス軸の始点に配置されます。

.flex-container {
  align-items: flex-end;
}

.flex-container {

align-items: flex-end;

}

.flex-container {
  -webkit-box-align: end;
     -ms-flex-align: end;
        align-items: flex-end;
}

.flex-container {

-webkit-box-align: end;

-ms-flex-align: end;

align-items: flex-end;

}

flexアイテムはflexコンテナのクロス軸の終点に配置されます。

.flex-container {
  align-items: center;
}

.flex-container {

align-items: center;

}

.flex-container {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}

.flex-container {

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

}

flexアイテムはflexコンテナのクロス軸の中央に配置されます。

.flex-container {
  align-items: baseline;
}

.flex-container {

align-items: baseline;

}

.flex-container {
  -webkit-box-align: baseline;
     -ms-flex-align: baseline;
        align-items: baseline;
}

.flex-container {

-webkit-box-align: baseline;

-ms-flex-align: baseline;

align-items: baseline;

}

flexアイテムはベースラインに沿って配置されます。

「align-items」のデフォルト値: stretch

ベースラインがどのように計算されるかは、W3Cのflex-baselinesを参考にしてください。

flexコンテナ: align-content（垂直方向の寄せと間隔）

「align-content」プロパティは「justify-content」と似ていますが、「align-content」プロパティはクロス軸の垂直方向に揃えて配置します。

align-contentプロパティで利用できる値

align-content: stretch;（デフォルト値）
すべてのアイテムを等間隔に配置。サイズがautoであるアイテムはコンテナに合わせて引き延ばす。
align-content: flex-start;
アイテムを先頭に寄せて配置。
align-content: flex-end;
アイテムを後尾に寄せて配置。
align-content: center;
アイテムを中央に寄せて配置。
align-content: space-between;
先頭と後尾は端に、残りは等間隔に配置。
align-content: space-around;
すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔。
align-content: space-evenly;
すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔

.flex-container {
  align-content: stretch;
}

.flex-container {

align-content: stretch;

}

.flex-container {
  -ms-flex-line-pack: stretch;
       align-content: stretch;
}

.flex-container {

-ms-flex-line-pack: stretch;

align-content: stretch;

}

flexアイテムは均等に分配されたスペースが全てのflexアイテムのあとについて配置されます。

.flex-container {
  align-content: flex-start;
}

.flex-container {

align-content: flex-start;

}

.flex-container {
  -ms-flex-line-pack: start;
       align-content: flex-start;
}

.flex-container {

-ms-flex-line-pack: start;

align-content: flex-start;

}

flexアイテムはflexコンテナのクロス軸の始点に向かって積み重なります。

.flex-container {
  align-content: flex-end;
}

.flex-container {

align-content: flex-end;

}

.flex-container {
  -ms-flex-line-pack: end;
       align-content: flex-end;
}

.flex-container {

-ms-flex-line-pack: end;

align-content: flex-end;

}

flexアイテムはflexコンテナのクロス軸の終点に向かって積み重なります。

.flex-container {
  align-content: center;
}

.flex-container {

align-content: center;

}

.flex-container {
  -ms-flex-line-pack: center;
       align-content: center;
}

.flex-container {

-ms-flex-line-pack: center;

align-content: center;

}

flexアイテムの行はflexコンテナのクロス軸の中心に積み重なります。

.flex-container {
  align-content: space-between;
}

.flex-container {

align-content: space-between;

}

.flex-container {
  -ms-flex-line-pack: justify;
       align-content: space-between;
}

.flex-container {

-ms-flex-line-pack: justify;

align-content: space-between;

}

flexアイテムの行はflexコンテナの始点から終点に等間隔で表示されます。

.flex-container {
  align-content: space-around;
}

.flex-container {

align-content: space-around;

}

.flex-container {
  -ms-flex-line-pack: distribute;
       align-content: space-around;
}

.flex-container {

-ms-flex-line-pack: distribute;

align-content: space-around;

}

flexアイテムはflexアイテムの全ての行の周りに等間隔で表示されます。

「align-content」のデフォルト値: stretch

このプロパティはflexコンテナが複数行のflexアイテムをもっている時だけ効果があります。もしflexアイテムが一行だった場合は、レイアウトに影響を与えません。

メモ: flexコンテナ

全ての「column-*」プロパティはflexコンテナに影響を与えません。
「::first-line」「::first-letter」などの疑似要素はflexコンテナに適用されません。

flexコンテナの子要素が、flexアイテムです。flexアイテムの使い方を解説します。

flexアイテム: order（アイテムを並べる順番を設定）

「order」プロパティは、flexコンテナ内に配置されるflexコンテナの子の順番をコントロールします。

orderプロパティで利用できる値

order: 0;（デフォルト値）
order: <整数値>
正・負・0のいずれかを定義、値の昇順に配置。

.flex-item {
  order: <integer>;
}

.flex-item {

order: <integer>;

}

.flex-item {
  -webkit-box-ordinal-group: 1;
             -ms-flex-order: 0;
                      order: 0;
}

.flex-item {

-webkit-box-ordinal-group: 1;

-ms-flex-order: 0;

order: 0;

}

flexアイテムはHTMLの並び順を変えずに、このシンプルなプロパティで変更できます。

「order」のデフォルト値: 0

flexアイテム: flex-grow（アイテムの伸長係数の比率）

「flex-grow」プロパティは、フリーのポジティブなスペースがある場合にflexアイテムが他のflexアイテムと比較してどのくらいの大きさになるかを指定します。

flex-growプロパティで利用できる値

flex-grow: 0;（デフォルト値）
flex-grow: <数値>
整数または小数部分のある数値、マイナスの値は無効。

.flex-item {
  flex-grow: <number>;
}

.flex-item {

flex-grow: <number>;

}

.flex-item {
  -webkit-box-flex: 0;
 -ms-flex-positive: 0;
         flex-grow: 0;
}

.flex-item {

-webkit-box-flex: 0;

-ms-flex-positive: 0;

flex-grow: 0;

}

「flex-grow」の値を同じに指定すると、全てのflexアイテムは同じサイズになります。

2番目のflexアイテムだけ値を変えると、他のアイテムに比べて多くのスペースを取ります。

「flex-grow」のデフォルト値: 0

マイナスの値は無効です。

flexアイテム: flex-shrink（アイテムの縮小係数の比率）

「flex-shrink」プロパティは、フリーのネガティブなスペースにflexコンテナ内のflexアイテムが残りのアイテムと比較してどのくらい縮まるかを指定します。

flex-shrinkプロパティで利用できる値

flex-shrink: 1;（デフォルト値）
flex-shrink: <数値>
整数または小数部分のある数値、マイナスの値は無効。

.flex-item {
  flex-shrink: <number>;
}

.flex-item {

flex-shrink: <number>;

}

.flex-item {
  -ms-flex-negative: 1;
        flex-shrink: 1;
}

.flex-item {

-ms-flex-negative: 1;

flex-shrink: 1;

}

デフォルトで全てのflexアイテムは縮小することができます。しかし「0」に指定した場合は、オリジナルのサイズを維持します。

「flex-shrink」のデフォルト値: 1

マイナスの値は無効です。

flexアイテム: flex-basis（アイテムの初期サイズを定義）

「flex-basis」プロパティは、flexアイテムの最初のメインとなるサイズを元に、幅と高さのプロパティを同じ値にします。

flex-basisプロパティで利用できる値

flex-basis: auto;（デフォルト値）
flex-basis: <width>
幅（px, emなど）、キーワード（max-content, min-content, fit-content）を指定。

.flex-item {
  flex-basis: auto | <width>;
}

.flex-item {

flex-basis: auto | <width>;

}

.flex-item {
  -ms-flex-preferred-size: auto;
               flex-basis: auto;
}

.flex-item {

-ms-flex-preferred-size: auto;

flex-basis: auto;

}

4番目のflexアイテムの「flex-basis」を「350px」に指定し、残りは最初の大きさに従います。

「flex-basis」のデフォルト値: auto

autoの値はネーミングの問題がありますが、将来解決される予定です。

flexアイテム: flex（伸長係数・縮小係数・初期サイズを定義）

「flex」プロパティは、「flex-grow」「flex-shrink」「flex-basis」のショートハンドです。「auto (1 1 auto) 」「(0 0 auto)」といった指定ができます。

flexプロパティで利用できる値

flex: 0 1 auto（デフォルト値）
「flex-grow」「flex-shrink」「flex-basis」を一緒に定義。

.flex-item {
  flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

.flex-item {

flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];

}

.flex-item {
  -webkit-box-flex: 0;
          -ms-flex: 0 1 auto;
              flex: 0 1 auto;
}

.flex-item {

-webkit-box-flex: 0;

-ms-flex: 0 1 auto;

flex: 0 1 auto;

}

「flex」のデフォルト値: 0 1 auto

W3Cはこのflexを使ったショートハンドの記述を別個で使うより奨励しています。参考：flex-common

flexアイテム: align-self（アイテムの配置方法）

「align-self」プロパティは前述の「align-items」での指定を上書きし、flexアイテムの整列を優先します。

align-selfプロパティで利用できる値

align-self: auto;（デフォルト値）
align-self: キーワードを指定。

.flex-item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

.flex-item {

}

.flex-item {
  -ms-flex-item-align: auto;
   -ms-grid-row-align: auto;
           align-self: auto;
}

.flex-item {

-ms-flex-item-align: auto;

-ms-grid-row-align: auto;

align-self: auto;

}

3番目と4番目のflexアイテムは「align-self」プロパティを使い配置しています。

「align-self」のデフォルト値: auto

「align-self」の「auto」の値は、その要素の親の「align-items」の値を元に計算します。

メモ: flexアイテム

「float」や「clear」や「vertical-align」はflexアイテムに影響を与えません。

CSS flexboxのレイアウトを試せるツール

CSS flexboxのレイアウトの威力を調査できる面白いツールを作りました。複雑なレイアウトも作成できるので、さまざまなプロパティを試してみてください。