Learn Flex Layout in 30 minutes

なぜ Flex レイアウトについてこのチュートリアルを書くのか。
それは非常にシンプルで柔軟であり、わずか数行のコードでさまざまなページのレイアウトを実現できるからです。ページレイアウトを学び始めた頃、float、display、position プロパティには大変悩まされました。しかし、Flex レイアウトなら、ほんの数個の CSS プロパティを覚えるだけで、シンプルで美しく、複雑なページレイアウトを書けるようになります。

このチュートリアルは次のような方におすすめです：
フロントエンドの初心者で、ページレイアウトのスキルについてはあまり詳しくないが、簡単な学習でページレイアウトの方法を身につけたい方
Flex レイアウトを学んだことはあるがまだ十分に習得できておらず、チュートリアルで知識を定着させ復習したい方
プロジェクトで古いバージョンの IE ブラウザとの互換性を考慮する必要がなく、シンプルで美しいページレイアウトを書きたい方
それでは、Flex レイアウトをわかりやすく簡潔に説明していきます。読み終える頃には必ず収穫があるはずです。

Flex の基本概念：

flex コンテナにはデフォルトで2つの軸があります。水平方向の main axis と垂直方向の cross axis です。これがデフォルトの設定です。もちろん、垂直方向を main axis に、水平方向を cross axis に変更することもできます。これについては後で説明します。

コンテナ内の各ユニットブロックは flex アイテムと呼ばれ、各アイテムが main axis 方向に占めるスペースを main size、cross axis 方向に占めるスペースを cross size と言います。

ここで強調しておきたいのは、width が main size で height が cross size だと思い込まないことです。これは main axis の向きによって変わります。たとえば垂直方向が main axis の場合、アイテムの height が main size になります。

Flex コンテナ：
まず、flex レイアウトを実装するには、先にコンテナを指定する必要があります。どの要素でも flex コンテナとして設定でき、コンテナ内の要素は flex を使ってレイアウトできるようになります。

.container {
display: flex | inline-flex; //can have two values
}
それぞれブロックレベルまたはインラインレベルの flex コンテナボックスを生成します。簡単に言えば、div のようなブロック要素には flex を、インライン要素には inline-flex を使います。

注意点として、flex レイアウトを設定すると、子要素の float、clear、vertical-align プロパティは無効になります。

コンテナには以下の6つのプロパティを設定できます：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1. flex-direction：main axis の方向（つまりアイテムの配置方向）を決定します

.container {
flex-direction: row | row-reverse | column | column-reverse;
}
デフォルト値：row。main axis は水平方向で、始点は左端です。

071308435418fe8b50e53065651ceffe095e97d1
row-reverse：main axis は水平方向で、始点は右端です
42d5f86506850a56bedd4481be29a0f03a8ee214
column：main axis は垂直方向で、始点は上端です

15d4c58e9e7ad6c93edd58317e2d285c956eb8f7

column-reverse：main axis は垂直方向で、始点は下端です

43e8c5dc8ab5b7a45879f90fee4a3c64db472dc9

2. flex-wrap：コンテナ内のアイテムを折り返すかどうかを決定します

デフォルトでは、アイテムは main axis 上に一列に配置されます。flex-wrap を使うとアイテムを折り返すことができます。

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
デフォルト値：nowrap。折り返しをしません。つまり、main axis のサイズが固定されている場合、スペースが不足してもアイテムのサイズが調整され、次の行に押し出されることはありません。

3cea30e0005a60f46b6ab89bf5523965eb63ff14

wrap：アイテムの main axis 方向の合計サイズがコンテナを超えたときに折り返します。最初の行が上に来ます

f4fd7741393db164318eb9f79679d100000a8a0a

wrap-reverse：折り返します。最初の行が下に来ます

a639cce939a5b330b60e2f0f0dc62c0c4ebb199d

3. flex-flow：flex-direction と flex-wrap の省略記法

.container {
flex-flow: || ;
}
デフォルト値は row nowrap です。あまり実用的ではないので、素直に個別に記述すればよいでしょう。このプロパティを覚える必要もなくなります。

4. justify-content：main axis 方向のアイテムの配置を定義します

.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
main axis が水平方向の場合、つまり flex-direction: row の場合のテスト用です

b6cb897f0aef7c7a05b4b8f25f7a3a390eff9448

150d4a8aaad88550bda32fa23cf0b0afa03c12ac

5. align-items：cross axis 方向のアイテムの配置を定義します

.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
main axis が水平方向の場合、つまり flex-direction: row の場合のテスト用です

デフォルト値は stretch です。つまり、アイテムの高さが設定されていないか auto に設定されている場合、コンテナ全体の高さを占めます。

7dfb6558b4ed8bfeff3256a2409efc7d5a7263fd

たとえばコンテナの高さを 100px に設定し、アイテムの高さを設定していない場合、アイテムの高さも 100px になります。

flex-start：cross axis の始点に揃えます

25e9b516ffde16c87d75c8bd0e16a5b4484f0fc9

たとえばコンテナの高さを 100px に設定し、アイテムが 20px、40px、60px、80px、100px の場合、上記のようになります。

flex-end：cross axis の終点に揃えます

0e4eaf529c1f1f10dc7016a3fa33691cc29d29b8

center：cross axis の中央に揃えます

e5c28e495822fa7901515131e2d1686950d8e46f

baseline：アイテム内の最初の行のテキストのベースラインで揃えます

4783ec8ee866d4ac7faf3fa74b8c7c07f768324b

主にテキストの下端を基準にした配置で、図をよく見ると理解できます。

6. align-content：複数行の軸の配置を定義します。行が1つしかない場合、このプロパティは効果がありません

.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
これは次のように理解できます：

flex-wrap が nowrap に設定されている場合、コンテナ内には行が1つしかありません。アイテムが折り返されないため、複数行になることはないからです。

flex-wrap が wrap に設定されている場合、コンテナ内に行が複数存在する可能性があります。このとき、複数行間の配置を設定する必要があります。

main axis が水平方向の場合、つまり flex-direction: row、flex-wrap: wrap の場合のテスト用です

デフォルト値は stretch です。下の図を見ると理解しやすいです

e57aa97229c0eb73d5fe2630dfa6ee27926ad0e3

図からわかるように、3つの行があり（コンテナの幅が限られているため）、stretch 値の場合、3つの行はコンテナの垂直方向のスペースを等分します。

注目すべきは、各行のアイテムのデフォルト値も stretch ですが、各アイテムに高さを設定しているため、コンテナ全体まで伸びないことです。アイテムに高さを設定していない場合は、次のようになります：

e2759516a2ad3debed5c3c6f04fdeda70708b2a8

これは以前 align-items でも説明しました。ここでのポイントは、3つの行が垂直軸のスペースを等分することを理解することです。

flex-start：すべての行が cross axis の始点に揃います

3f62893aada41d3e53c3c41c5e3ba34847c033de

flex-end：すべての行が cross axis の終点に揃います

947692c4275c19b830440f526ca54ce025e02c83
center：すべての行が cross axis の中央に揃います

b8e4cc6d8aefc0c0e8f08a6f18ef1e88bae51ec9
space-between：行を両端に配置し、行間の間隔を等しくします。つまり、残りのスペースを均等に行間の隙間に分配します。

f4dff6d915dac250adf869c8a14c6e2b25c9e504
space-around：各行の両側の間隔が等しくなります。そのため、行同士の間隔は行とエッジとの間隔の2倍になります。

229540852127cdf0a4d1b18096e643708f0e93cf
これでコンテナのプロパティはすべて説明しました。次は flex アイテムのプロパティについて説明します。

Flex アイテムのプロパティ：
アイテムに適用できる属性は6つあります：

order
flex-basis
flex-grow
flex-shrink
flex
align-self
1. order：コンテナ内でのアイテムの配置順序を定義します。値が小さいほど前に配置されます。デフォルト値は 0 です

.item {
order: ;
}
8c68d4870e5930ed5686b4e0c45b9f7a6185658b

HTML 構造上では order が -2 や -1 のアイテムが後ろに配置されていても、order を設定しているため前に配置されます。

2. flex-basis：追加スペースを分配する前の、アイテムが main axis 方向に占める基準サイズを定義します。ブラウザはこのプロパティに基づいて、main axis に追加のスペースがあるかどうかを計算します。

.item {
flex-basis: | auto;
}
デフォルト値：auto。アイテムの元のサイズです。このとき、アイテムの width と height は width または height の値に依存します。

main axis が水平方向の場合、flex-basis が設定されていると、アイテムの width の設定値は無効になります。flex-basis は flex-grow および flex-shrink と組み合わせて使用する必要があります。

flex-basis の値が 0% の場合、アイテムのサイズはゼロとみなされるため、サイズを 140px に指定しても効果がありません。
flex-basis の値が auto の場合、設定されたサイズの値（たとえば 100px）が残りのスペースの計算から除外されます。
3. flex-grow：アイテムの拡大比率を定義します

.item {
flex-grow: ;
}
デフォルト値は 0 です。つまり、残りスペースがあっても拡大しません。

2eb9c704ff1d12980017f47c4ec64fc853d7d732

すべてのアイテムが flex-basis の値に従って配置された後にまだスペースが残っている場合、flex-grow が働きます。

すべてのアイテムの flex-grow が 1 の場合、残りスペースを等分します。

1つのアイテムの flex-grow が 2 で他が 1 の場合、前者は他のアイテムの2倍の残りスペースを獲得します。

もちろん、すべてのアイテムを flex-basis の値で配置した結果スペースが不足し、かつ flex-wrap: nowrap の場合、flex-grow は機能しません。このときは次のプロパティが必要になります。

4. flex-shrink：アイテムの縮小比率を定義します

.item {
flex-shrink: ;
}
デフォルト値：1。つまり、スペースが不足している場合、アイテムは縮小されます。負の値はこのプロパティに影響しません。

b10aeed2b843e5b1335a6c8d61793ce75c7e26d9

ここでは、各アイテムの width が 50px に設定されていますが、コンテナ自体の幅が 200px しかないため、各アイテムは同じ比率で縮小されます。デフォルト値が 1 だからです。

同様に：

すべてのアイテムの flex-shrink が 1 の場合、スペースが不足すると比率に応じて縮小されます。

1つのアイテムの flex-shrink が 0 で他が 1 の場合、スペースが不足しても前者は縮小されません。

5. flex：flex-grow、flex-shrink、flex-basis の省略記法

.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>？ || <'flex-basis'> ]
}
flex のデフォルト値は上記3つのプロパティ値の組み合わせです。上記3つのプロパティがすべてデフォルト値の場合、flex のデフォルト値は 0 1 auto になります。

ショートカット値：auto（1 1 auto）と none（0 0 auto）

flex の値にはいくつかの特殊なケースがあり、以下のように分類できます：

flex の値が非負の数の場合、その数は flex-grow の値となり、flex-shrink は 1、flex-basis は 0% です。以下は等価です：
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
flex の値が 0 の場合、対応する3つの値は 0 1 0% です
.item {flex: 0;}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
}
flex の値が長さまたはパーセンテージの場合、flex-basis の値とみなされ、flex-grow は 1、flex-shrink は 1 です。以下は等価です（0% は非負の数ではなくパーセンテージであることに注意）
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

.item-2 {flex: 24px;}
.item-2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
flex の値が2つの非負の数の場合、それぞれ flex-grow と flex-shrink の値とみなされ、flex-basis の値は 0% です。以下は等価です：
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
flex の値が非負の数と長さまたはパーセンテージの場合、それぞれ flex-grow と flex-basis の値とみなされ、flex-shrink は 1 です。以下は等価です：
.item {flex: 11 32px;}
.item {
flex-grow: 11;
flex-shrink: 1;
flex-basis: 32px;
}
3つのプロパティを個別に記述するよりも、このプロパティを優先して使用することをお勧めします。

grow と shrink は対になるプロパティで、grow は伸長係数を、shrink は収縮係数を表します。

grow は、flex コンテナ内の子要素の width の合計がコンテナの幅より小さい場合に機能します。grow は子要素のサイズの伸長係数を定義し、コンテナから子要素の合計を引いた残りのスペースを、各子要素の grow 値に応じて分配します。

また、コメント欄で @王嘉成 さんから、コンテナの flex-wrap と子要素の flex-shrink および flex-grow の関係について補足がありました：
flex-wrap が wrap または wrap-reverse で、子アイテムの width が親コンテナの幅より小さい場合、flex-grow が機能し、子アイテムは flex-grow の設定値に応じて拡大されます（0 に設定されたアイテムは拡大されません）
flex-wrap が wrap または wrap-reverse で、子アイテムの width が親コンテナの幅を超える場合、まず改行が行われます。改行後、各行の右端にスペースが残る可能性があります（最後の行に含まれる子アイテムは前の行より少ない可能性があるため、残りスペースが大きくなる場合があります）。その場合、flex-grow が機能します。現在の行のすべての子アイテムの flex-grow が 0 の場合、残りスペースはそのまま残ります。現在の行に flex-grow が 0 でない子アイテムがあれば、その残りスペースは flex-grow が 0 でない子アイテムに占有されます
flex-wrap が nowrap で、子アイテムの width が親コンテナの幅より小さい場合、flex-grow が機能し、子アイテムは flex-grow の設定値に応じて拡大されます（0 に設定されたアイテムは拡大されません）
flex-wrap が nowrap で、子アイテムの width が親コンテナの幅を超える場合、flex-shrink が機能し、子アイテムは flex-shrink の設定値に応じて縮小されます（0 に設定されたアイテムは縮小されません）。ただし、特殊なケースとして、その行のすべての子アイテムの flex-shrink が 0 の場合、つまりすべての子アイテムが縮小できない場合、厄介な水平スクロールバーが表示されます
上記の4点をまとめると、どのような状況でも flex-shrink と flex-grow のどちらか一方しか同時に機能しないことがわかります。その理由は考えれば非常にシンプルです。スペースに余裕があるときは flex-grow が働き、スペースが不足しているときは flex-shrink が働くからです。もちろん、flex-wrap の値が wrap または wrap-reverse の場合は改行が可能であることを示しています。改行が可能であれば、基本的には常に十分なスペースが確保されるため、flex-shrink は当然機能しません。
6. align-self：個別のアイテムに対して、他のアイテムとは異なる配置を指定できます

個別のアイテムが align-items で定義された配置を上書きします

デフォルト値は auto で、親要素の align-items プロパティを継承することを意味します。親要素がない場合は stretch と同じです。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
これは align-items プロパティと同じですが、align-self は個別のアイテムにのみ有効で、align-items はコンテナ内のすべてのアイテムに有効です。

ade4fdad71d9788c76e26dca1857c72688ea33d1

コンテナの align-items は flex-start に設定されていますが、3番目のアイテムの align-self の値は flex-end です。