はじめに

Flexboxを使ったレイアウトで「要素を中央に配置したい」「アイテム間に均等な余白を設けたい」といった配置の調整が必要になる場面は頻繁にあります。Flexboxには、これらの配置を細かく制御するための強力なプロパティが用意されています。

本記事では、Flexboxの配置プロパティについて以下の内容を解説します。

  • 主軸方向の配置を制御するjustify-content
  • 交差軸方向の配置を制御するalign-itemsとalign-content
  • 個別アイテムの配置を制御するalign-self
  • アイテム間の間隔を制御するgapプロパティ

これらのプロパティを理解することで、Flexboxを使った要素の配置を思い通りに制御できるようになります。

前提条件

本記事を読み進めるにあたり、以下の知識があることを前提としています。

  • Flexboxの基本概念（フレックスコンテナとフレックスアイテム）
  • 主軸（main axis）と交差軸（cross axis）の考え方
  • flex-directionとflex-wrapの基本的な使い方

これらの基礎知識については、前回の記事「Flexbox入門 - 柔軟なレイアウトの基本概念を理解する」で解説しています。

動作確認環境

  • Google Chrome 131以降
  • Firefox 133以降
  • Safari 18以降
  • Microsoft Edge 131以降

配置プロパティの全体像

Flexboxの配置プロパティは、「どの軸方向に」「何を」配置するかによって使い分けます。

flowchart TB
    subgraph container["フレックスコンテナに適用"]
        justify["justify-content<br/>主軸方向の配置"]
        alignItems["align-items<br/>交差軸方向の全アイテム配置"]
        alignContent["align-content<br/>複数行の交差軸方向配置"]
    end
    
    subgraph item["フレックスアイテムに適用"]
        alignSelf["align-self<br/>個別アイテムの交差軸配置"]
    end
プロパティ 適用対象 配置方向 用途
justify-content コンテナ 主軸 全アイテムの主軸方向配置
align-items コンテナ 交差軸 全アイテムの交差軸方向配置
align-content コンテナ 交差軸 複数行の場合の行間配置
align-self アイテム 交差軸 個別アイテムの交差軸方向配置

justify-content - 主軸方向の配置

justify-contentプロパティは、主軸方向におけるフレックスアイテムの配置を制御します。flex-direction: rowの場合は横方向、flex-direction: columnの場合は縦方向の配置を決定します。

justify-contentの値

値 説明
flex-start 主軸の開始位置に寄せて配置（初期値）
flex-end 主軸の終了位置に寄せて配置
center 主軸の中央に配置
space-between 最初と最後のアイテムを端に配置し、残りを均等配置
space-around 各アイテムの両側に均等な余白を配置
space-evenly アイテム間と両端に均等な余白を配置

flex-start（初期値）

アイテムを主軸の開始位置に寄せて配置します。これがFlexboxの初期動作です。

1
2
3
4

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

flowchart LR
    subgraph container["コンテナ"]
        direction LR
        A["1"] ~~~ B["2"] ~~~ C["3"]
        D[" "]
    end
    
    style A fill:#4CAF50,color:#fff
    style B fill:#4CAF50,color:#fff
    style C fill:#4CAF50,color:#fff
    style D fill:transparent,stroke:none

flex-end

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

1
2
3
4

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

flowchart LR
    subgraph container["コンテナ"]
        direction LR
        D[" "]
        A["1"] ~~~ B["2"] ~~~ C["3"]
    end
    
    style A fill:#4CAF50,color:#fff
    style B fill:#4CAF50,color:#fff
    style C fill:#4CAF50,color:#fff
    style D fill:transparent,stroke:none

center

アイテムを主軸の中央に配置します。水平方向の中央揃えでよく使用されます。

1
2
3
4

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

flowchart LR
    subgraph container["コンテナ"]
        direction LR
        D1[" "]
        A["1"] ~~~ B["2"] ~~~ C["3"]
        D2[" "]
    end
    
    style A fill:#4CAF50,color:#fff
    style B fill:#4CAF50,color:#fff
    style C fill:#4CAF50,color:#fff
    style D1 fill:transparent,stroke:none
    style D2 fill:transparent,stroke:none

space-between

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

1
2
3
4

.container {
  display: flex;
  justify-content: space-between;
}

1
2
3
4
5

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.container {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f5f5;
}

.item {
  width: 80px;
  height: 80px;
  background-color: #4CAF50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

space-betweenはナビゲーションバーのロゴとメニューを左右に配置する場合などに便利です。

space-around

各アイテムの両側に均等な余白を配置します。隣接するアイテム間の余白は、端の余白の2倍になります。

1
2
3
4

.container {
  display: flex;
  justify-content: space-around;
}

space-evenly

アイテム間と両端に完全に均等な余白を配置します。space-aroundとの違いは、端の余白とアイテム間の余白が同じになる点です。

1
2
3
4

.container {
  display: flex;
  justify-content: space-evenly;
}

space-between、space-around、space-evenlyの違い

3つのspace系プロパティの違いを視覚的に理解しましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* space-between: 端に余白なし、アイテム間に均等な余白 */
.space-between {
  justify-content: space-between;
}

/* space-around: 端の余白はアイテム間の半分 */
.space-around {
  justify-content: space-around;
}

/* space-evenly: 端とアイテム間に完全に均等な余白 */
.space-evenly {
  justify-content: space-evenly;
}
プロパティ 端の余白 アイテム間の余白
space-between なし 均等
space-around アイテム間の半分 均等
space-evenly アイテム間と同じ 均等

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

align-itemsプロパティは、交差軸方向におけるフレックスアイテムの配置を制御します。flex-direction: rowの場合は縦方向、flex-direction: columnの場合は横方向の配置を決定します。

align-itemsの値

値 説明
stretch コンテナの高さに合わせて引き伸ばす（初期値）
flex-start 交差軸の開始位置に寄せて配置
flex-end 交差軸の終了位置に寄せて配置
center 交差軸の中央に配置
baseline テキストのベースラインに揃えて配置

stretch（初期値）

アイテムを交差軸方向に引き伸ばして、コンテナの高さ（または幅）に合わせます。これがalign-itemsの初期値です。

1
2
3
4
5

.container {
  display: flex;
  align-items: stretch;
  height: 200px;
}

1
2
3
4
5

<div class="container">
  <div class="item">短いテキスト</div>
  <div class="item">長いテキスト<br>複数行</div>
  <div class="item">中くらい</div>
</div>

stretchを使用すると、コンテンツの量に関係なくすべてのアイテムが同じ高さになります。カードレイアウトなどで統一感を出す場合に便利です。

flex-start

アイテムを交差軸の開始位置（上端）に寄せて配置します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.container {
  display: flex;
  align-items: flex-start;
  height: 200px;
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  margin: 5px;
}

各アイテムはコンテンツに応じた高さになり、上端に揃えて配置されます。

flex-end

アイテムを交差軸の終了位置（下端）に寄せて配置します。

1
2
3
4
5

.container {
  display: flex;
  align-items: flex-end;
  height: 200px;
}

center

アイテムを交差軸の中央に配置します。垂直方向の中央揃えで頻繁に使用されます。

1
2
3
4
5

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

justify-content: centerと組み合わせることで、要素を水平・垂直の両方向で中央に配置できます。

1
2
3
4
5
6

.container {
  display: flex;
  justify-content: center; /* 水平方向中央 */
  align-items: center;     /* 垂直方向中央 */
  height: 100vh;
}

この組み合わせは、モーダルダイアログやランディングページのヒーローセクションなど、完全中央配置が必要な場面で非常に便利です。

baseline

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

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

.item:first-child {
  font-size: 24px;
}

.item:nth-child(2) {
  font-size: 14px;
}

.item:last-child {
  font-size: 18px;
}

フォントサイズが異なるアイテムでも、テキストのベースラインが揃います。異なるサイズのテキストを横並びにする場合に有効です。

align-content - 複数行の交差軸方向配置

align-contentプロパティは、flex-wrap: wrapで複数行になった場合の、行間の配置を制御します。単一行のフレックスコンテナには効果がありません。

align-contentの値

値 説明
stretch 行をコンテナの高さに合わせて引き伸ばす（初期値）
flex-start 行を交差軸の開始位置に寄せて配置
flex-end 行を交差軸の終了位置に寄せて配置
center 行を交差軸の中央に配置
space-between 最初と最後の行を端に配置し、残りを均等配置
space-around 各行の両側に均等な余白を配置
space-evenly 行間と両端に均等な余白を配置

align-contentの使用例

1
2
3
4
5
6
7
8

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 300px;
  width: 300px;
}

.item {
  width: 80px;
  height: 80px;
  background-color: #4CAF50;
  color: white;
  margin: 5px;
}

align-contentが有効に動作するためには、以下の条件を満たす必要があります。

  1. flex-wrap: wrapまたはflex-wrap: wrap-reverseが設定されている
  2. コンテナの交差軸方向のサイズが、すべてのアイテムを表示するのに必要なサイズより大きい

align-itemsとalign-contentの違い

プロパティ 対象 効果
align-items 各行内のアイテム 行内でのアイテムの配置を制御
align-content 行全体 行間の配置を制御

単一行の場合はalign-itemsのみが効果を持ち、複数行の場合は両方が効果を持ちます。

align-self - 個別アイテムの配置

align-selfプロパティは、特定のフレックスアイテムに対して、align-itemsで設定された配置を上書きします。フレックスコンテナではなく、フレックスアイテムに適用する点が特徴です。

align-selfの値

align-selfはalign-itemsと同じ値を取ります。加えて、auto値を使用してコンテナのalign-items設定を継承できます。

値 説明
auto 親のalign-itemsの値を継承（初期値）
stretch 交差軸方向に引き伸ばす
flex-start 交差軸の開始位置に配置
flex-end 交差軸の終了位置に配置
center 交差軸の中央に配置
baseline ベースラインに揃えて配置

align-selfの使用例

1
2
3
4
5
6

<div class="container">
  <div class="item">1</div>
  <div class="item special">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.container {
  display: flex;
  align-items: flex-start;
  height: 200px;
}

.item {
  width: 80px;
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  margin: 5px;
}

/* 2番目のアイテムだけ中央に配置 */
.special {
  align-self: center;
  background-color: #FF5722;
}

この例では、コンテナ全体はflex-startで上端揃えになっていますが、.specialクラスのアイテムだけはalign-self: centerで中央に配置されています。

実践例: 特定のアイテムを下端に配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.container {
  display: flex;
  align-items: flex-start;
  height: 300px;
}

.item:first-child {
  align-self: stretch;
}

.item:last-child {
  align-self: flex-end;
}

gapプロパティによる間隔制御

gapプロパティは、フレックスアイテム間の間隔を設定します。従来はmarginを使って間隔を調整していましたが、gapを使用することでより簡潔に記述できます。

gapプロパティの値

プロパティ 説明
gap 行間と列間の両方を一括設定
row-gap 行間（複数行の場合）を設定
column-gap 列間（アイテム間）を設定

gapの基本的な使い方

1
2
3
4

.container {
  display: flex;
  gap: 20px; /* すべての間隔を20pxに設定 */
}

行間と列間を別々に設定することもできます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 20px; /* 行間30px、列間20px */
}

/* または個別に指定 */
.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;
  column-gap: 20px;
}

gapとmarginの違い

gapプロパティはmarginと比較して以下の利点があります。

観点 gap margin
記述量 少ない 多い
端の余白 発生しない 発生する（調整が必要）
最初・最後の調整 不要 :first-child、:last-childで調整が必要 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* marginを使った従来の方法 */
.item {
  margin: 10px;
}

.item:first-child {
  margin-left: 0;
}

.item:last-child {
  margin-right: 0;
}

/* gapを使った方法 */
.container {
  display: flex;
  gap: 20px; /* これだけでOK */
}

gapの実践例: カードレイアウト

1
2
3
4
5
6
7
8

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
  <div class="card">Card 6</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 0 1 calc(33.333% - 16px);
  min-width: 250px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

ここまで学んだ配置プロパティを使って、実際のWebサイトでよく使われるレイアウトパターンを実装してみましょう。

パターン1: ナビゲーションバー

ロゴを左に、メニューを右に配置するヘッダーレイアウトです。

1
2
3
4
5
6
7
8
9

<header class="navbar">
  <div class="logo">Logo</div>
  <nav class="nav-menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
</header>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #333;
  color: white;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  gap: 30px;
}

.nav-menu a {
  color: white;
  text-decoration: none;
}

.nav-menu a:hover {
  color: #4CAF50;
}

パターン2: 完全中央配置

要素を画面の中央（水平・垂直）に配置するパターンです。

1
2
3
4
5
6
7

<div class="hero">
  <div class="hero-content">
    <h1>Welcome to Our Site</h1>
    <p>素晴らしい体験をお届けします</p>
    <button>Get Started</button>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-content {
  text-align: center;
  color: white;
}

.hero-content h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.hero-content button {
  padding: 15px 40px;
  font-size: 18px;
  border: none;
  border-radius: 30px;
  background-color: white;
  color: #667eea;
  cursor: pointer;
}

パターン3: フッターを最下部に固定

ページのコンテンツが少ない場合でも、フッターを画面最下部に配置するパターンです。

1
2
3
4
5
6
7

<div class="page-wrapper">
  <header class="header">ヘッダー</header>
  <main class="main-content">
    <p>メインコンテンツ</p>
  </main>
  <footer class="footer">フッター</footer>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

.header {
  background-color: #333;
  color: white;
  padding: 20px;
}

.main-content {
  flex: 1; /* 残りの空間をすべて占める */
  padding: 20px;
}

.footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

パターン4: サイドバーとメインコンテンツ

サイドバーを固定幅にし、メインコンテンツを可変幅にするパターンです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<div class="layout">
  <aside class="sidebar">
    <nav>
      <a href="#">Menu 1</a>
      <a href="#">Menu 2</a>
      <a href="#">Menu 3</a>
    </nav>
  </aside>
  <main class="content">
    <h1>メインコンテンツ</h1>
    <p>ここにコンテンツが入ります。</p>
  </main>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px; /* 固定幅250px */
  background-color: #f5f5f5;
  padding: 20px;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sidebar a {
  color: #333;
  text-decoration: none;
  padding: 10px;
  border-radius: 5px;
}

.sidebar a:hover {
  background-color: #e0e0e0;
}

.content {
  flex: 1; /* 残りの空間を使用 */
  padding: 30px;
}

パターン5: 等間隔のアイコンメニュー

ソーシャルメディアアイコンなどを等間隔に配置するパターンです。

1
2
3
4
5
6

<div class="social-icons">
  <a href="#" class="icon">FB</a>
  <a href="#" class="icon">TW</a>
  <a href="#" class="icon">IG</a>
  <a href="#" class="icon">LI</a>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  color: white;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.3s;
}

.icon:hover {
  background-color: #4CAF50;
}

配置プロパティのまとめ

本記事で解説した配置プロパティを整理します。

コンテナに適用するプロパティ

プロパティ 方向 初期値 主な用途
justify-content 主軸 flex-start アイテムの水平配置
align-items 交差軸 stretch アイテムの垂直配置
align-content 交差軸 stretch 複数行の行間配置
gap 両方 0 アイテム間の間隔

アイテムに適用するプロパティ

プロパティ 方向 初期値 主な用途
align-self 交差軸 auto 個別アイテムの垂直配置

よく使う組み合わせ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* 完全中央配置 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 左右に分割 */
.split {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 均等配置のカードグリッド */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

まとめ

本記事では、Flexboxの配置プロパティについて解説しました。

重要なポイントは以下の通りです。

  • justify-content: 主軸方向の配置を制御し、space-betweenやcenterなどで柔軟なレイアウトを実現
  • align-items: 交差軸方向の全アイテム配置を制御し、垂直中央揃えなどに使用
  • align-content: 複数行の場合の行間配置を制御
  • align-self: 個別アイテムの配置を上書き
  • gap: アイテム間の間隔をシンプルに設定

これらのプロパティを組み合わせることで、ナビゲーションバー、カードレイアウト、完全中央配置など、様々なレイアウトパターンを実現できます。

次のステップとして、flex-grow、flex-shrink、flex-basisを学ぶことで、アイテムのサイズ制御についても理解を深めることをお勧めします。

参考リンク