EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSS Flexboxコンテナ

Flexboxは強力な1次元レイアウト方法で、コンテナ内の要素の整列、分布、順序付けを容易にします。

Flexコンテナのプロパティ

早見表

プロパティ 値 用途
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 アイテム間のスペース

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>
▶ 試してみよう

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>
▶ 試してみよう

よく使う値：

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>
▶ 試してみよう

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>
▶ 試してみよう

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で均等に配置され、最後の行は左揃えのカードリストを作成してください。
100%