Flexbox（フレックスボックス）

図解でさらに詳しく学びたい方はこちら 日本語版Flexboxチートシート（Webクリエイターボックス）

Flexboxのプロパティは、「親要素に書くもの」と「子要素に書くもの」の2種類があります。この区別が上達の最大のポイントです。

1. 親要素（コンテナ）に指定するプロパティ

全体の並び方や揃え方をコントロールします。

主軸の方向
flex-direction		 row（横並び ※初期値）
column（縦並び）
row-reverse（右から左へ）
横方向の揃え
justify-content		 flex-start（左揃え） / center（中央）
flex-end（右揃え）
space-between（両端に広げて配置）
space-around（均等に隙間を空ける）
縦方向の揃え
align-items		 stretch（親の高さ一杯に伸ばす）
center（上下中央揃え）
flex-start（上揃え） / flex-end（下揃え）
折り返し設定
flex-wrap		 nowrap（折り返さない ※初期値）
wrap（幅に収まらない場合に改行する）
要素間の隙間
gap		 20px（要素同士の間にだけ20pxの隙間を作る）
※marginより計算が楽なので推奨されます

2. 子要素（アイテム）に指定するプロパティ

個別の要素の大きさや順序を調整します。

伸び率
flex-grow		 0（伸びない ※初期値） / 1（余白を埋めるように伸びる）
比率（1:2など）で指定も可能
縮み率
flex-shrink		 1（縮む ※初期値） / 0（絶対に縮まない）
ベースの幅
flex-basis		 auto（中身に合わせる） / 200px（基準の幅を指定）
表示順序
order		 1, 2, 3...（HTMLの記述順に関係なく並び替える）
スマホ版だけボタンを上に持ってくる、といった調整に便利
プロの最短コード

よく使う「伸び・縮み・ベース幅」は flex プロパティでまとめて書くのが一般的です。
例：flex: 1; （＝ flex-grow: 1; flex-shrink: 1; flex-basis: 0%; と同じ。要素を均等に広げたい時に多用します）

3. 逆引きシチュエーション