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

フレックスボックスの配置制御は、justify-content と align-items の2つの主要なプロパティによって行われます。 これらのプロパティを理解することで、アイテムを自在に配置できるようになります。

軸と配置の関係

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

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

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;
}

小さい文字

大きい文字

中くらい

組み合わせの実例

justify-content と align-items を組み合わせることで、様々な配置パターンを実現できます。

完全中央配置

最も一般的な使用例の一つです。

CSS

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

完全中央配置

右下配置

CSS

.flex-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 150px;
}

右下配置

カードレイアウトの配置

CSS

.card-container {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 20px;
}

カード 1

カード 2

カード 3

flex-direction との関係

重要: justify-content と align-items の効果は、flex-direction の値によって変わります。

row の場合（デフォルト）

• justify-content: 水平方向（左右）の配置を制御
• align-items: 垂直方向（上下）の配置を制御

column の場合

• justify-content: 垂直方向（上下）の配置を制御
• align-items: 水平方向（左右）の配置を制御

column での justify-content

CSS

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
}

アイテム 1

アイテム 2

アイテム 3

column での align-items

CSS

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 200px;
}

アイテム 1

アイテム 2

アイテム 3

実用的なレイアウトパターン

ヘッダーレイアウト

ロゴを左に、ナビゲーションを右に配置する一般的なパターン：

CSS

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

ロゴ

モーダルの中央配置

画面中央にモーダルを配置する場合：

CSS

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}

モーダルコンテンツ

フッター配置

コンテンツの量に関係なく、フッターをページ下部に固定：

CSS

.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
}

メインコンテンツ エリア

フッター (常に下部に配置)

試してみよう

以下のインタラクティブなデモで、justify-content と align-items の組み合わせを試してみてください：

justify-content（主軸方向の配置）:flex-startflex-endcenterspace-betweenspace-aroundspace-evenly

align-items（交差軸方向の配置）:stretchflex-startflex-endcenterbaseline

現在の設定: justify-content: flex-start | align-items: stretch

アイテム 1

アイテム 2
（高さ異なる）

アイテム 3
（小さめ）

各プロパティ値の一覧

すべての値を確認して、違いを理解しましょう：

justify-content の各値

flex-start

A

B

C

flex-end

A

B

C

center

A

B

C

space-between

A

B

C

space-around

A

B

C

space-evenly

A

B

C

align-items の各値

stretch

小

中

大

flex-start

小

中

大

flex-end

小

中

大

center

小

中

大

baseline

小

中

大

まとめ

• justify-content: 主軸方向（通常は水平）のアイテム配置を制御
• align-items: 交差軸方向（通常は垂直）のアイテム配置を制御
• flex-direction の値によって軸が変わることに注意
• 2つのプロパティを組み合わせることで、柔軟で実用的なレイアウトを実現
• 完全中央配置、ヘッダーレイアウト、モーダル配置など、実際のWebサイトでよく使われるパターンを習得

これらのプロパティを理解することで、従来のCSSでは複雑だったレイアウトを、シンプルで直感的なコードで実現できるようになります。