CSS Flexbox チートシート: プロパティと値
Flexbox はアイテムを 1 方向（行または列）に配置し、その間のスペースを分配します。プロパティは 2 グループに分かれます: コンテナ（flex の親）に設定するものと、アイテム（子）に設定するもの。
メンタルモデル: flex-direction が 主軸 を決め、justify-content がそれに沿って揃え、align-items が垂直な 交差軸 に沿って揃えます。
更新 2026-07-06
コンテナのプロパティ（flex の親）
| プロパティ | 値 | 動作 |
|---|---|---|
| display | flex | inline-flex | 要素を flex コンテナに変える |
| flex-direction | row | row-reverse | column | column-reverse | 主軸の方向 |
| flex-wrap | nowrap | wrap | wrap-reverse | アイテムを新しい行に折り返すかどうか |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | 主軸に沿った配置 |
| align-items | stretch | flex-start | center | flex-end | baseline | 交差軸に沿った配置 |
| align-content | flex-start | center | space-between | stretch | 折り返した複数行を揃える |
| gap | <length> (e.g. 16px) | アイテム間のスペース |
アイテムのプロパティ（子）
| プロパティ | 値 | 動作 |
|---|---|---|
| flex-grow | 0 | <number> | アイテムがスペースを埋めるために伸びる量 |
| flex-shrink | 1 | <number> | スペースが足りないとき縮む量 |
| flex-basis | auto | <length> | grow/shrink 前のアイテムの初期サイズ |
| flex | e.g. 1 1 0 | 1 | auto | grow・shrink・basis の短縮形 |
| align-self | auto | center | flex-start | flex-end | stretch | 1 つのアイテムだけ align-items を上書き |
| order | 0 | <integer> | アイテムを見た目上並べ替え（小さいほど先） |
最も一般的な中央揃えのコツ: コンテナに display: flex; justify-content: center; align-items: center; を設定すると、子を水平・垂直の両方で中央に。これらの値に使うサイズ単位は CSS 単位リファレンス を参照してください。