English 中文 العربية 日本語 Português

CSS: CSS Flexboxコンテナ

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

主軸の方向を制御：

▶ サンプル

HTML 
<style>
.container {
  display: flex;
  flex-direction: row; /* デフォルト：水平 */
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #3498db;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
</div>
▶ 試してみよう

3. justify-content

主軸に沿ってアイテムを配置：

▶ サンプル

HTML 
<style>
.container {
  display: flex;
  justify-content: space-between;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #e74c3c;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">開始</div>
  <div class="item">中央</div>
  <div class="item">終了</div>
</div>
▶ 試してみよう

よく使う値：

4. align-items

交差軸に沿ってアイテムを配置：

▶ サンプル

HTML 
<style>
.container {
  display: flex;
  align-items: center;
  height: 200px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #2ecc71;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div class="item">短い</div>
  <div class="item">より多くのコンテンツを含む高いアイテム</div>
  <div class="item">中程度</div>
</div>
▶ 試してみよう

5. flex-wrap

アイテムが新しい行に折り返すかどうかを制御：

▶ サンプル

HTML 
<style>
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
  width: 300px;
}
.item {
  background: #9b59b6;
  color: white;
  padding: 10px;
  width: 120px;
}
</style>
<div class="container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
  <div class="item">アイテム4</div>
</div>
▶ 試してみよう

6. gap

Flexアイテム間の間隔を設定：

▶ サンプル

HTML 
<style>
.container {
  display: flex;
  gap: 20px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #f39c12;
  color: white;
  padding: 10px;
  flex: 1;
}
</style>
<div class="container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
</div>
▶ 試してみよう

❓ よくある質問

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は無視されます。

📖 まとめ

📝 練習問題

基本

  1. 5つのアイテムを含むFlexコンテナを作成してください。4つのflex-directionの値すべてを試して、方向の変化を観察してください。
  2. 6つのjustify-contentの値すべてをスクリーンショットで比較実演してください。

中級

  1. flex-wrap: wrapを設定し、異なるalign-contentの値で複数行の配置を観察してください。
  2. gapプロパティとmarginの間隔を比較してください——gapの便利さを実感してください。

チャレンジ

  1. レスポンシブナビゲーションバーを作成してください：デスクトップではロゴが左、メニューが右；モバイルではロゴが左、ハンバーガーが右、メニューは非表示。
  2. justify-content: space-betweenで均等に配置され、最後の行は左揃えのカードリストを作成してください。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%