Flexboxチートシート
Flexboxは、CSSのレイアウトモジュールで、異なるデバイスや画面サイズでも要素を効率的に配置し、スペースを配分するための強力なツールです。ここでは、Flexboxの主要なプロパティを「親要素（Flexコンテナ）」と「子要素（Flexアイテム）」に分けてまとめました。
親要素（Flexコンテナ）のプロパティ
Flexコンテナに適用するプロパティは、子要素の配置全体を制御します。
| プロパティ |
値 |
説明 |
| display |
flex; |
要素をFlexコンテナにします。Flexboxを使うためには、まずこのプロパティを設定します。 |
| flex-direction |
row
row-reverse
column
column-reverse |
Flexアイテムが配置される主軸（メイン軸）の方向を定義します。
- row: アイテムを左から右へ水平に並べます（**初期値**）。
- row-reverse: アイテムを右から左へ水平に並べます。
- column: アイテムを上から下へ垂直に並べます。
- column-reverse: アイテムを下から上へ垂直に並べます。
|
| flex-wrap |
nowrap
wrap
wrap-reverse |
Flexアイテムがコンテナ内で収まらない場合に、折り返すかどうかを定義します。
- nowrap: 折り返しません。すべてのアイテムが1行に収まります（**初期値**）。
- wrap: アイテムを新しい行に折り返します。
- wrap-reverse: アイテムを逆方向に折り返します。
|
| flex-flow |
<flex-direction> <flex-wrap> |
flex-direction と flex-wrap のショートハンドプロパティです。
例: flex-flow: row wrap; |
| justify-content |
flex-start
flex-end
center
space-between
space-around
space-evenly |
主軸（メイン軸）に沿ったFlexアイテムの配置を定義します。
- flex-start: 開始位置に寄せる（**初期値**）。
- flex-end: 終了位置に寄せる。
- center: 中央に配置。
- space-between: 最初と最後のアイテムは端に配置し、残りのアイテムは均等にスペースを配分。
- space-around: 各アイテムの左右に均等なスペースを配分。
- space-evenly: 各アイテム間のスペースと、最初・最後のアイテムとコンテナの端との間のスペースをすべて均等に配分。
|
| align-items |
stretch
flex-start
flex-end
center
baseline |
交差軸（クロス軸）に沿ったFlexアイテムの配置を定義します（垂直方向の配置）。
- stretch: アイテムをコンテナの高さに合わせて引き伸ばします（**初期値**）。
- flex-start: 交差軸の開始位置に寄せる。
- flex-end: 交差軸の終了位置に寄せる。
- center: 交差軸の中央に配置。
- baseline: アイテムのベースラインに合わせて配置。
|
| align-content |
stretch
flex-start
flex-end
center
space-between
space-around |
複数行に折り返されたFlexアイテムの行間の配置を定義します（flex-wrap: wrap; の場合のみ有効）。単一行の場合は効果がありません。
- stretch: 行をコンテナの高さに合わせて引き伸ばします（**初期値**）。
- flex-start: 行を交差軸の開始位置に寄せる。
- flex-end: 行を交差軸の終了位置に寄せる。
- center: 行を交差軸の中央に配置。
- space-between: 最初と最後の行は端に配置し、残りの行は均等にスペースを配分。
- space-around: 各行の上下に均等なスペースを配分。
|
gap
(row-gap, column-gap) |
<length>
<row-gap> <column-gap> |
Flexアイテム間の間隔を定義します。gap は行と列の両方に適用できます。
- 例: gap: 10px; (行と列の両方に10pxの間隔)
- 例: gap: 10px 20px; (行に10px、列に20pxの間隔)
|
子要素（Flexアイテム）のプロパティ
Flexアイテムに適用するプロパティは、個々のアイテムの振る舞いを制御します。
| プロパティ |
値 |
説明 |
| order |
0 |
Flexアイテムの表示順序を定義します。値が小さいほど先に表示されます（**初期値は0**）。
例: order: 1; |
| flex-grow |
0 |
Flexアイテムが、コンテナ内の余ったスペースをどれだけ「拡大」するかを定義します（**初期値は0**）。
値は比率で、0以上の数値を指定します。
例: flex-grow: 1; (余ったスペースを均等に拡大) |
| flex-shrink |
1 |
Flexアイテムが、コンテナのスペースが足りない場合にどれだけ「縮小」するかを定義します（**初期値は1**）。
値は比率で、0以上の数値を指定します。0にすると縮小しません。
例: flex-shrink: 0; (縮小しない) |
| flex-basis |
auto
<length> |
Flexアイテムの初期サイズを定義します。コンテンツの幅や高さのように機能します。
- auto: コンテンツのサイズに基づく（**初期値**）。
- px, %, em などの単位で指定できます。
例: flex-basis: 200px;
|
| flex |
<flex-grow> <flex-shrink> <flex-basis> |
flex-grow, flex-shrink, flex-basis のショートハンドプロパティです。
例: flex: 1 1 auto; (grow: 1, shrink: 1, basis: auto)
よく使われる値:
- flex: 1; (1 1 0% と同等: コンテナの幅に合わせて拡大・縮小し、初期サイズは0)
- flex: auto; (1 1 auto と同等: コンテナの幅に合わせて拡大・縮小し、初期サイズはコンテンツの幅)
- flex: none; (0 0 auto と同等: 拡大も縮小もせず、初期サイズはコンテンツの幅)
|
| align-self |
auto
flex-start
flex-end
center
stretch
baseline |
個々のFlexアイテムの交差軸（クロス軸）に沿った配置を定義します。align-items の設定を上書きできます。
- auto: 親の align-items の値に従う（**初期値**）。
- flex-start, flex-end, center, stretch, baseline (align-items と同じ値を使用)。
|
インタラクティブFlexboxデモ
親要素（Flexコンテナ）のプロパティ
アイテム 1
アイテム 2
アイテム 3
