CSS: CSS Flexboxコンテナ
最終更新：2026-10-13
Flexboxは強力な1次元レイアウト方法で、コンテナ内の要素の整列、分布、順序付けを容易にします。
1. Flexコンテナのプロパティ
(1) 早見表
| プロパティ | 値 | 用途 |
|---|---|---|
display: flex |
— | Flexコンテナを作成 |
flex-direction |
row、row-reverse、column、column-reverse |
主軸の方向 |
flex-wrap |
nowrap、wrap、wrap-reverse |
アイテムが折り返すかどうか |
justify-content |
flex-start、flex-end、center、space-between、space-around、space-evenly |
主軸の配置 |
align-items |
flex-start、flex-end、center、stretch、baseline |
交差軸の配置 |
align-content |
flex-start、flex-end、center、space-between、space-around、stretch |
複数行の交差軸 |
gap |
10px、10px 20px |
アイテム間のスペース |
2. flex-direction
主軸の方向を制御：
▶ サンプル
▶ 試してみよう3. justify-content
主軸に沿ってアイテムを配置：
▶ サンプル
▶ 試してみようよく使う値：
flex-start: アイテムを先頭に配置（デフォルト）flex-end: アイテムを末尾に配置center: アイテムを中央に配置space-between: アイテム間に等しいスペースspace-around: アイテムの周りに等しいスペースspace-evenly: アイテム間と周りに等しいスペース
4. align-items
交差軸に沿ってアイテムを配置：
▶ サンプル
▶ 試してみよう5. flex-wrap
アイテムが新しい行に折り返すかどうかを制御：
▶ サンプル
▶ 試してみよう6. gap
Flexアイテム間の間隔を設定：
▶ サンプル
▶ 試してみよう❓ よくある質問
Q flex-directionがcolumnの場合、justify-contentの方向は変わりますか？
A はい。
justify-contentは常に主軸に沿って動作します。flex-direction: rowの場合、主軸は水平で、columnの場合、主軸は垂直になります。覚えておいてください：justify-contentは主軸を制御し、align-itemsは交差軸を制御します。Q flex-wrapはいつ使うべきですか？
A アイテムが1行に収まらない場合です。デフォルト（
nowrap）はアイテムを圧縮し、wrapは次の行に流します。レスポンシブレイアウトでは必須で、小さな画面でアイテムをスタックする場合に必要です。Q align-itemsとalign-contentの違いは何ですか？
A
align-itemsは単一行のアイテムの配置を制御します（各行内）。align-contentは複数行のスペース分布を制御します（複数行の場合のみ動作）。単一行ではalign-contentは無視されます。📖 まとめ
- Flexboxコンテナのプロパティは「全体的な」動作を制御します——アイテムの配置、折り返し、整列方法
- 覚えておいてください：
justify-contentは主軸を制御し、align-itemsは交差軸を制御します flex-directionが変更されると、これらの2つの有効な方向が入れ替わります
📝 練習問題
基本
- 5つのアイテムを含むFlexコンテナを作成してください。4つの
flex-directionの値すべてを試して、方向の変化を観察してください。 - 6つの
justify-contentの値すべてをスクリーンショットで比較実演してください。
中級
flex-wrap: wrapを設定し、異なるalign-contentの値で複数行の配置を観察してください。gapプロパティとmarginの間隔を比較してください——gapの便利さを実感してください。
チャレンジ
- レスポンシブナビゲーションバーを作成してください：デスクトップではロゴが左、メニューが右；モバイルではロゴが左、ハンバーガーが右、メニューは非表示。
justify-content: space-betweenで均等に配置され、最後の行は左揃えのカードリストを作成してください。
