メインコンテンツまでスキップ

フレックスボックスの配置制御

フレックスボックスの配置制御は、justify-content と align-items の2つの主要なプロパティによって行われます。

軸と配置の関係​

フレックスボックスでは、配置を制御する際に主軸（main axis） と 交差軸（cross axis） を意識することが重要です。

  • justify-content: 主軸方向（通常は水平方向）のアイテム配置を制御
  • align-items: 交差軸方向（通常は垂直方向）のアイテム配置を制御

flexbox配置の基本概念

justify-content: 主軸方向の配置​

justify-content プロパティは、フレックスアイテムを主軸方向にどのように配置するかを指定します。 余剰スペースがある場合の分配方法を制御できます。

CSS
.flex-container {
  display: flex;
  justify-content: center; /* アイテムを中央に配置 */
}

justify-content の値​

flex-start（デフォルト）​

アイテムを主軸の開始位置に配置します。

CSS
.flex-container {
  justify-content: flex-start;
}
アイテム 1
アイテム 2
アイテム 3

flex-end​

アイテムを主軸の終了位置に配置します。

CSS
.flex-container {
  justify-content: flex-end;
}
アイテム 1
アイテム 2
アイテム 3

center​

アイテムを主軸の中央に配置します。

CSS
.flex-container {
  justify-content: center;
}
アイテム 1
アイテム 2
アイテム 3

space-between​

最初のアイテムを開始位置に、最後のアイテムを終了位置に配置し、残りのアイテムを等間隔で配置します。

CSS
.flex-container {
  justify-content: space-between;
}
アイテム 1
アイテム 2
アイテム 3

space-around​

各アイテムの周りに等しいスペースを配置します。アイテム間のスペースは、端のスペースの2倍になります。

CSS
.flex-container {
  justify-content: space-around;
}
アイテム 1
アイテム 2
アイテム 3

space-evenly​

すべてのスペース（アイテム間、端）を等しく配置します。

CSS
.flex-container {
  justify-content: space-evenly;
}
アイテム 1
アイテム 2
アイテム 3

align-items: 交差軸方向の配置​

align-items プロパティは、フレックスアイテムを交差軸方向にどのように配置するかを指定します。 アイテムの高さが異なる場合の配置方法を制御できます。

CSS
.flex-container {
  display: flex;
  align-items: center; /* アイテムを交差軸の中央に配置 */
}

align-items の値​

stretch（デフォルト）​

アイテムをコンテナの高さいっぱいに伸ばします。

CSS
.flex-container {
  align-items: stretch;
}
アイテム 1
アイテム 2
（複数行）
アイテム 3

flex-start​

アイテムを交差軸の開始位置に配置します。

CSS
.flex-container {
  align-items: flex-start;
}
アイテム 1
アイテム 2
（高さ異なる）
アイテム 3

flex-end​

アイテムを交差軸の終了位置に配置します。

CSS
.flex-container {
  align-items: flex-end;
}
アイテム 1
アイテム 2
（高さ異なる）
アイテム 3

center​

アイテムを交差軸の中央に配置します。

CSS
.flex-container {
  align-items: center;
}
アイテム 1
アイテム 2
（高さ異なる）
アイテム 3

baseline​

アイテムのベースライン（文字のベースライン）を揃えて配置します。

CSS
.flex-container {
  align-items: baseline;
}
小さい文字
大きい文字
中くらい

flex-direction との関係​

justify-content は主軸の方向の配置、align-items は交差軸の方向の配置を制御しますので、 flex-direction の値によって影響を与える方向が変わります。

試してみよう​

flex-direction、justify-content と align-items の組み合わせを試してみましょう。

アイテム 1
アイテム 2
（高さ異なる）
アイテム 3
（小さめ）

演習課題​

課題1: 水平中央配置​

3つの要素を横一列に並べ、コンテナの中央に配置してください。

要件:

  • 3つの要素が水平方向に並んでいる
  • 要素全体がコンテナの中央に配置されている
  • 要素間に適度な余白がある
⛳目標レイアウト
アイテム1
アイテム2
アイテム3
🎨Playground
HTML
Loading...
CSS
Loading...
プレビュー
解答例を見る
.container {
  height: 200px;
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

課題2: 完全中央配置​

1つの要素をコンテナの完全な中央（水平・垂直ともに中央）に配置してください。

⛳目標レイアウト
中央に配置
🎨Playground
HTML
Loading...
CSS
Loading...
プレビュー
解答例を見る
.container {
  height: 200px;
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

課題3: 縦並び配置​

3つの要素を縦一列に並べ、中央に配置してください。

⛳目標レイアウト
上
中央
下
🎨Playground
HTML
Loading...
CSS
Loading...
プレビュー
解答例を見る
.container {
  height: 300px;
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}