Flexboxレイアウト完全ガイド｜基礎から実践まで徹底解説

Web制作において、レイアウト設計は非常に重要な要素です。
その中でも**Flexbox（Flexible Box Layout）**は、1次元方向のレイアウトを直感的かつ効率的に構築できるCSSの仕組みとして広く活用されています。

本記事では、Flexboxの基本概念から主要プロパティ、実務での活用例までを体系的に解説します。
基礎を確実に理解し、実践で迷わない状態を目指します。

Flexboxとは何か

Flexboxとは、要素を柔軟に配置するためのCSSレイアウトモジュールです。

従来のレイアウト（floatやposition）では、縦中央揃えや等間隔配置が複雑になりがちでした。しかしFlexboxを使うことで、次のようなレイアウトが容易になります。

• 横並びレイアウト
• 縦中央揃え
• 均等配置
• 可変幅レイアウト
• レスポンシブ対応

なお、CSSの基本構造について理解が曖昧な場合は、先に
▶︎「CSSの基本と仕組みを理解する」
を確認しておくと理解がスムーズです。

Flexboxの基本構造

Flexboxは、**親要素（コンテナ）と子要素（アイテム）**で構成されます。

Flexコンテナの定義

まず、親要素に以下を指定します。

.container {
  display: flex;
}

これだけで、直下の子要素が「Flexアイテム」として扱われます。

基本用語

主軸方向を決める：flex-direction

要素の並び方向を決定するプロパティです。

.container {
  display: flex;
  flex-direction: row;
}

主な値

• row（初期値）：横並び
• row-reverse：横並び（逆順）
• column：縦並び
• column-reverse：縦並び（逆順）

縦並びレイアウトを作る場合は column を使います。

主軸方向の揃え方：justify-content

主軸方向の配置を制御します。

.container {
  display: flex;
  justify-content: center;
}

主な値

• flex-start：左寄せ（初期値）
• center：中央揃え
• flex-end：右寄せ
• space-between：両端揃え（均等間隔）
• space-around：余白を均等に
• space-evenly：完全均等配置

ナビゲーションメニューやボタン群で頻繁に使用されます。

交差軸方向の揃え方：align-items

交差軸方向の配置を制御します。

.container {
  display: flex;
  align-items: center;
}

主な値

• stretch（初期値）
• center
• flex-start
• flex-end
• baseline

縦中央揃えは以下で実現できます。

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

この指定は、Web制作で非常に頻出です。

折り返し設定：flex-wrap

要素を折り返すかどうかを指定します。

.container {
  display: flex;
  flex-wrap: wrap;
}

値

• nowrap（初期値）
• wrap
• wrap-reverse

レスポンシブ対応では wrap が重要になります。

子要素に指定するプロパティ

Flexboxは子要素にも指定できます。

flex-grow

余白をどの比率で分配するかを決めます。

.item {
  flex-grow: 1;
}

flex-shrink

縮小時の比率を決めます。

.item {
  flex-shrink: 0;
}

flex-basis

初期サイズを指定します。

.item {
  flex-basis: 200px;
}

flex（ショートハンド）

.item {
  flex: 1;
}

これは以下と同じ意味です。

flex: 1 1 0%;

実務でよくあるFlexboxレイアウト例

横並びカードレイアウト

.container {
  display: flex;
  gap: 20px;
}

gapを使えば、要素間の余白も簡潔に指定できます。

ヘッダーの左右配置

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

ロゴとナビゲーションの配置で定番です。

可変幅レイアウト

.main {
  display: flex;
}

.content {
  flex: 3;
}

.sidebar {
  flex: 1;
}

比率指定によるレイアウトが簡単に実現できます。

Gridとの違い

Flexboxは「1次元レイアウト」に強い仕組みです。
縦横両方向を同時に制御したい場合は、CSS Gridの方が適しています。

• 横並び中心 → Flexbox
• 二次元配置 → Grid

レイアウト設計の全体像を理解したい場合は、
▶︎「Web制作の全体像」
も参考になります。

Flexboxを学ぶ前提知識

Flexboxを理解するには、以下の知識が前提になります。

• HTML構造の理解
  ▶︎「HTMLの基本と仕組みを理解する」
• CSSセレクタの理解
  ▶︎「CSSの基本と仕組みを理解する」

土台が固まっていれば、Flexboxは難しくありません。

Flexboxでよくあるつまずき

1. 中央揃えが効かない

→ 親要素に display: flex; が指定されているか確認します。

2. 高さが揃わない

→ align-items: stretch; を確認します。

3. 折り返されない

→ flex-wrap を確認します。

まとめ

Flexboxは、現代のWeb制作における標準的なレイアウト手法です。

重要ポイントは以下です。

• 親に display: flex
• 主軸は justify-content
• 交差軸は align-items
• 子要素の比率は flex

これらを理解すれば、ほとんどの1次元レイアウトは自在に構築できます。

関連記事

• HTMLの基本と仕組みを理解する
• CSSの基本と仕組みを理解する
• Web制作の全体像

レイアウト理解は、Web制作の基礎体力です。
確実に身につけておくことで、応用力が大きく広がります。