数年前からいつからflexboxを制作に取り入れようか悩んでいましたが、もう使っても大丈夫でしょう！flexbox！
ということで今回はflexboxの使い方を紹介していきます。

CSS Flexible Box Layout Module

flexboxは親要素に適用するcssプロパティと、子要素に適用するcssプロパティがこんがらがってきますので、最初に親要素・子要素に適用するプロパティを分けます。
ここからは親要素を「コンテナ」、子要素を「アイテム」と表記していきます。

コンテナプロパティ

まず初めにコンテナに指定できるプロパティから紹介していきます。
コンテナプロパティの説明では、下記のhtmlを用いて説明していきます。

<style>
.flex-container{
 display:flex;
}
</style>
<div class="flex-container">
 <div class="flex-item item-A">A</div>
 <div class="flex-item item-B">B<span>description</span></div>
 <div class="flex-item item-C">C</div>
</div>

display:flex

display:flexを適用させないと、下記のように表示されます。

単純にdisplay:flexを適用すると、下記のように表示されます。

flex-direction

flex-directionはアイテムを並べる方向を決めるプロパティです。初期値の「row」場合はfg2のようになります。
「row」以外の場合を見ていきましょう。

プロパティの値

• row （初期値）
• row-reverse
• column
• column-reverse

flex-wrap

flex-wrapはアイテムがコンテナをはみ出した時に折り返し方をを決めるプロパティです。

プロパティの値

• nowrap （初期値）
• wrap
• wrap-reverse

flex-flow

flex-flowはflex-directionとflex-wrapを一括で指定できるプロパティです。
下記のように書くことができます。

.flex-container{
 flex-flow: 【flex-directionの値】 【flex-wrapの値】;
}

justify-content

justify-contentはアイテムの横方向の揃え方を決めるプロパティです。初期値の「flex-start」場合はfg2のようになります。
「flex-start」以外の場合を見ていきましょう。

プロパティの値

• flex-start （初期値）
• flex-end
• center
• space-between
• space-around

※fg12.の「space-around」は両端の余白のみ半分のサイズになります。

align-items

align-itemsはアイテムの縦方向の揃え方を決めるプロパティです。初期値の「stretch」場合はfg2のように横並びのアイテムの高さを揃えてくれます。
アイテム個別ごとに縦方向の揃え方を決めるプロパティalign-selfもあります。
「stretch」以外の場合を見ていきましょう。

プロパティの値

• stretch （初期値）
• flex-start
• flex-end
• center
• baseline

align-content

align-contentは複数行のときのアイテムの位置揃えを決めるプロパティです。
今回は下記のコードで説明していきます。

<style>
.flex-container{
 display: flex;
 flex-wrap: wrap;
 height: 200px;
}
</style>
<div class="flex-container">
 <div class="flex-item item-A">A</div>
 <div class="flex-item item-B">B</div>
 <div class="flex-item item-C">C</div>
 <div class="flex-item item-D">D</div>
 <div class="flex-item item-E">E</div>
</div>

プロパティの値

• stretch （初期値）
• flex-start
• flex-end
• center
• space-between
• space-around

※fg17.の「stretch」を指定してもアイテムに高さを指定いる場合は、指定した高さが優先になります。
※fg22.の「space-around」は上下両端の余白のみ半分のサイズになります。

アイテムプロパティ

次にアイテムに指定できるプロパティから見ていきます。
アイテムプロパティの説明では、下記のhtmlを用いて説明していきます。

<style>
.flex-container{
 display: flex;
 width: 600px;
}
</style>
<div class="flex-container">
 <div class="flex-item item-A">A</div>
 <div class="flex-item item-B">B</div>
 <div class="flex-item item-C">C</div>
</div>

flex-basis

flex-basisはアイテムのベースサイズを指定します。
ベースサイズは
flex-directionが「row」「row-reverse」の時はアイテムの横幅
flex-directionが「column」「column-reverse」の時は、アイテムの縦幅になります。
アイテムにwidthやheightを指定しても、flex-basisが優先して適用されます。ただし、max-widthやmin-widthなどは適用されます。
初期値の「auto」場合はfg2のようになり、この時はwidthやheightの指定は有効になります。

プロパティの値（pxや%で指定）

• auto （初期値）

下記のように指定すると、fg23のようになります。

.item-A{
 flex-basis: 50px;
}
.item-B{
 flex-basis: 100px;
}
.item-C{
 flex-basis: 150px;
}

flex-grow

flex-growはコンテナに余白ができたときに、余白をどのように埋めるかを決定するプロパティです。初期値（0）の場合はfg23のようになります。

プロパティの値（数値で指定）

• 0 （初期値）

全てのアイテムにflex-grow:1を指定すると、下記のようになります。

.item-A{
 flex-basis: 50px;
 flex-grow: 1;
}
.item-B{
 flex-basis: 100px;
 flex-grow: 1;
}
.item-C{
 flex-basis: 150px;
 flex-grow: 1;
}

これは余白の300pxを A:B:C＝1:1:1 の比率で分け合ったのです。だからそれぞれのアイテムの幅が「ベースサイズ+100px」になっているのです。

例えば下記のようすると、全てのアイテムが同じ幅になります。

.item-A{
 flex-basis: 50px;
 flex-grow: 3;
}
.item-B{
 flex-basis: 100px;
 flex-grow: 2;
}
.item-C{
 flex-basis: 150px;
 flex-grow: 1;
}

これは余白の300pxを A:B:C＝3:2:1 の比率で分け合っていますので、
A = 300px/6*3 = 150px
B = 300px/6*2 = 100px
C = 300px/6*1 = 50px
それぞれの値がアイテムの幅に足されています。

flex-shrink

flex-shrinkはアイテムがコンテナをはみ出した時に、どんな割合で縮小して、コンテナに収まるかを決めるプロパティです。

プロパティの値（数値で指定）

• 1（初期値）

下記のような場合、初期値のflex-shrink:1の時はfg26のようになります。

.flex-container{
 display: flex;
 width: 210px;
}
.item-A{
 flex-basis: 50px;
}
.item-B{
 flex-basis: 100px;
}
.item-C{
 flex-basis: 150px;
}

これは下記の計算でfg26.のような結果になっています。

縮小の比率
Aの縮小比:Bの縮小比:Cの縮小比
＝ (Aのflex-basis)*(Aのflex-shrink)：(Bのflex-basis)*(Bのflex-shrink)：(Cのflex-basis)*(Cのflex-shrink)
＝ 50*1：100*1：150*1
＝ 1:2:3

縮小幅
Aの縮小幅＝ 90px/6*1 = 15px
Bの縮小幅＝ 90px/6*2 = 30px
Cの縮小幅＝ 90px/6*3 = 45px

アイテムの幅
Aの幅 ＝ 50px - 15px = 35px
Bの幅 ＝ 100px - 30px = 70px
Cの幅 ＝ 150px - 45px = 105px

flex-growの時はアイテムのflex-basisは関係しなかったのですが、flex-shrinhは関係してくるので、計算が少しややこしいです。

下記のようにflex-shrinkを指定したときにどうなるか見てみましょう。

.flex-container{
 display: flex;
 width: 210px;
}
.item-A{
 flex-basis: 50px;
 flex-shrink: 0;
}
.item-B{
 flex-basis: 100px;
 flex-shrink: 3;
}
.item-C{
 flex-basis: 150px;
 flex-shrink: 4;
}

これも一から計算して確認してみます。

縮小の比率
Aの縮小比:Bの縮小比:Cの縮小比
＝ 50*0：100*3：150*4
＝ 0:1:2

縮小幅
Aの縮小幅＝ 90px/3*0 = 0px
Bの縮小幅＝ 90px/3*1 = 30px
Cの縮小幅＝ 90px/3*2 = 60px

アイテムの幅
Aの幅 ＝ 50px - 0 = 50px
Bの幅 ＝ 100px - 30px = 70px
Cの幅 ＝ 150px - 60px = 90px

flex

flexプロパティはこれまで説明してきた、「flex-grow」「flex-shrink」「flex-basis」を下記のように一括で指定できます。

.flex-item{
 flex: 【flex-grow】 【flex-shrink】 【flex-basis】;
}

order

orderプロパティはアイテムの並び順を変更することができます。

プロパティの値（数値で指定）

• 0（初期値）

下記のように指定すると、fg28のようになります。

<style>
.flex-container{
 display: flex;
}
.flex-item{
 flex-basis:100px;
}
.item-A{
 order: 1;
}
.item-D{
 order: 2;
}
.item-C{
 order: -1;
}
</style>
<div class="flex-container">
 <div class="flex-item item-A">A</div>
 <div class="flex-item item-B">B</div>
 <div class="flex-item item-C">C</div>
 <div class="flex-item item-D">D</div>
 <div class="flex-item item-E">E</div>
</div>

align-self

align-itemsとプロパティの値や挙動は同じです。

align-itemsはコンテナのプロパティに対して、align-selfはアイテムのプロパティです。
アイテム個別で縦方向の揃え方を変えたい場合に使用します。