Flexbox入門 - 柔軟なレイアウトの基本概念を理解する

はじめに

Webサイトのレイアウトを構築する際、「要素を横並びにしたい」「中央揃えにしたい」「余白を均等に配置したい」といった要件に直面します。これらの課題をシンプルかつ柔軟に解決できるのが、CSSのFlexbox（フレックスボックス）レイアウトです。

Flexboxは2012年頃から主要ブラウザでサポートが進み、現在ではモダンWebレイアウトに欠かせない技術となっています。1次元（行または列）のレイアウトを直感的に制御できるため、ナビゲーションバー、カードレイアウト、フッターの配置など、あらゆる場面で活用されています。

本記事では、Flexboxの基本概念について以下の内容を解説します。

• Flexboxの仕組み（フレックスコンテナとフレックスアイテム）
• 主軸（main axis）と交差軸（cross axis）の考え方
• flex-directionとflex-wrapによる方向と折り返しの制御
• 基本的な配置パターンの実装方法

前提条件

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

• HTMLの基本的なタグ構造（div、span、navなど）
• CSSの基本構文（セレクタ・プロパティ・値の関係）
• displayプロパティの基本的な理解

動作確認環境

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

Flexboxとは

Flexboxは「Flexible Box Layout Module」の略称で、要素を柔軟に配置するためのCSSレイアウトモデルです。MDN Web Docsでは次のように説明されています。

フレックスボックスレイアウトは、アイテム間の余白を分配するための一次元レイアウトモデルで、数多くの配置機能を含んでいます。

「一次元」という表現がポイントです。Flexboxは行（横方向）か列（縦方向）のいずれか一方向にレイアウトを制御します。これに対して、CSS Grid Layoutは行と列の両方を同時に制御する二次元レイアウトモデルです。

flowchart LR
    subgraph flexbox["Flexbox（一次元）"]
        direction LR
        A["アイテム1"] --> B["アイテム2"] --> C["アイテム3"]
    end
    
    subgraph grid["Grid（二次元）"]
        direction TB
        D["1,1"] --- E["1,2"] --- F["1,3"]
        G["2,1"] --- H["2,2"] --- I["2,3"]
    end

Flexboxを使う場面

Flexboxは以下のようなレイアウトに最適です。

フレックスコンテナとフレックスアイテム

Flexboxレイアウトを構成する2つの要素を理解することが、Flexbox習得の第一歩です。

フレックスコンテナ（Flex Container）

display: flexまたはdisplay: inline-flexを指定した要素がフレックスコンテナになります。このコンテナがFlexboxレイアウトの「親要素」となり、内部の子要素の配置を制御します。

1
2
3

.container {
  display: flex; /* この要素がフレックスコンテナになる */
}

フレックスアイテム（Flex Item）

フレックスコンテナの直接の子要素がフレックスアイテムになります。孫要素以降はフレックスアイテムにはなりません。

1
2
3
4
5

<div class="container">
  <div class="item">アイテム1</div> <!-- フレックスアイテム -->
  <div class="item">アイテム2</div> <!-- フレックスアイテム -->
  <div class="item">アイテム3</div> <!-- フレックスアイテム -->
</div>

flowchart TB
    subgraph container["フレックスコンテナ（display: flex）"]
        item1["フレックスアイテム 1"]
        item2["フレックスアイテム 2"]
        item3["フレックスアイテム 3"]
    end

基本的なFlexbox適用例

以下のHTMLとCSSで、Flexboxの基本的な動作を確認できます。

1
2
3
4
5

<div class="flex-container">
  <div class="flex-item">One</div>
  <div class="flex-item">Two</div>
  <div class="flex-item">Three</div>
</div>

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

.flex-container {
  display: flex;
  border: 2px solid #333;
  padding: 10px;
}

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

display: flexを指定するだけで、子要素は自動的に横並び（行方向）に配置されます。これがFlexboxの初期動作です。

主軸と交差軸

Flexboxを使いこなすには、「主軸」と「交差軸」という2つの軸の概念を理解する必要があります。

主軸（Main Axis）

主軸は、フレックスアイテムが配置される方向の軸です。flex-directionプロパティによって定義され、アイテムはこの軸に沿って並びます。

交差軸（Cross Axis）

交差軸は、主軸に対して垂直に交わる軸です。主軸が横方向であれば交差軸は縦方向になり、主軸が縦方向であれば交差軸は横方向になります。

flowchart TB
    subgraph row["flex-direction: row の場合"]
        direction LR
        subgraph main1["主軸（横方向）"]
            R1["→"]
        end
        subgraph cross1["交差軸（縦方向）"]
            R2["↓"]
        end
    end
    
    subgraph column["flex-direction: column の場合"]
        direction TB
        subgraph main2["主軸（縦方向）"]
            C1["↓"]
        end
        subgraph cross2["交差軸（横方向）"]
            C2["→"]
        end
    end

主軸の開始点と終了点

主軸には「開始点（start）」と「終了点（end）」があります。日本語や英語のような左から右に読む言語では、flex-direction: rowの場合、開始点は左側、終了点は右側になります。

この概念を理解することで、justify-contentやalign-itemsなどの配置プロパティの動作を正しく把握できます。

flex-directionプロパティ

flex-directionプロパティは、主軸の方向を決定します。これにより、フレックスアイテムがどの方向に配置されるかが決まります。

flex-directionの値

row（初期値）

アイテムを左から右へ横並びに配置します。これがFlexboxの初期動作です。

1
2
3
4

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

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]（左から右へ配置）

row-reverse

アイテムを右から左へ横並びに配置します。アイテムの順序は維持されますが、配置が右から始まります。

1
2
3
4

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

表示結果: [3] [2] [1]（右から左へ配置）

column

アイテムを上から下へ縦並びに配置します。主軸が垂直方向になります。

1
2
3
4

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

表示結果:

[1]
[2]
[3]

column-reverse

アイテムを下から上へ縦並びに配置します。

1
2
3
4

.container {
  display: flex;
  flex-direction: column-reverse;
}

表示結果:

[3]
[2]
[1]

使い分けのポイント

• row: ナビゲーションバー、ヘッダー内のロゴとメニュー配置
• column: サイドバー内のメニュー、モバイル向けレイアウト
• row-reverse: 右から左への配置が必要な場合（例：チャット画面）
• column-reverse: フッターを最下部に固定しつつ上方向に積み上げる場合

flex-wrapプロパティ

Flexboxの初期動作では、すべてのアイテムは1行（または1列）に収まろうとします。アイテムの合計幅がコンテナを超えると、アイテムは縮小するか、コンテナからはみ出します。flex-wrapプロパティを使うと、この動作を制御できます。

flex-wrapの値

nowrap（初期値）

アイテムは折り返されず、1行に配置されます。コンテナに収まらない場合、アイテムが縮小されるか、はみ出します。

1
2
3
4
5
6
7
8
9

.container {
  display: flex;
  flex-wrap: nowrap;
  width: 300px;
}

.item {
  width: 150px; /* 3つのアイテムで450px必要 */
}

この場合、各アイテムは100pxに縮小されて1行に収まります。

wrap

アイテムがコンテナに収まらない場合、次の行に折り返されます。レスポンシブデザインで頻繁に使用されます。

1
2
3
4
5
6
7
8
9

.container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}

.item {
  width: 150px;
}

flowchart TB
    subgraph container["コンテナ（幅300px）"]
        subgraph line1["1行目"]
            A["アイテム1（150px）"]
            B["アイテム2（150px）"]
        end
        subgraph line2["2行目"]
            C["アイテム3（150px）"]
        end
    end

wrap-reverse

wrapと同様に折り返しますが、新しい行は上方向に追加されます。

1
2
3
4

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

flex-flowショートハンド

flex-directionとflex-wrapは頻繁に一緒に使用されるため、flex-flowというショートハンドプロパティが用意されています。

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

/* 個別指定 */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* ショートハンド */
.container {
  display: flex;
  flex-flow: row wrap;
}

flex-flowの構文

1

flex-flow: <flex-direction> <flex-wrap>;

よく使用される組み合わせは以下の通りです。

基本的な配置パターンの実装

ここまでの知識を活かして、実務でよく使われる配置パターンを実装してみましょう。

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

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

1
2
3
4
5
6
7
8

<header class="header">
  <div class="logo">Logo</div>
  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</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

.header {
  display: flex;
  justify-content: space-between; /* 左右に配置 */
  align-items: center; /* 垂直方向中央揃え */
  padding: 10px 20px;
  background-color: #333;
  color: white;
}

.nav {
  display: flex;
  gap: 20px; /* アイテム間の間隔 */
}

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

パターン2: カードレイアウト

複数のカードを横並びで配置し、収まらない場合は折り返すレイアウトです。

1
2
3
4
5
6

<div class="card-container">
  <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>

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

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 0 1 calc(33.333% - 16px); /* 3列レイアウト */
  min-width: 250px; /* 最小幅を設定 */
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

パターン3: 垂直方向の中央揃え

要素をコンテナの中央（水平・垂直両方）に配置するパターンです。

1
2
3
4
5
6

<div class="center-container">
  <div class="centered-content">
    <h1>タイトル</h1>
    <p>中央に配置されたコンテンツです。</p>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

.centered-content {
  text-align: center;
}

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

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

1
2
3
4
5

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

1
2
3
4
5
6
7
8
9

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

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

Flexboxの初期値まとめ

Flexboxを使用する際、各プロパティの初期値を理解しておくと、意図しない動作を防げます。

コンテナに適用されるプロパティの初期値

アイテムに適用されるプロパティの初期値

これらの初期値により、display: flexを指定するだけで以下の動作になります。

1. アイテムは横並び（row）で配置される
2. アイテムは1行に収まり、折り返さない（nowrap）
3. アイテムは左揃え（flex-start）で配置される
4. アイテムは交差軸方向に引き伸ばされる（stretch）
5. アイテムは必要に応じて縮小するが、余白があっても拡大しない

まとめ

本記事では、Flexboxの基本概念について解説しました。

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

• フレックスコンテナとフレックスアイテム: display: flexを指定した要素がコンテナ、その直接の子要素がアイテムになる
• 主軸と交差軸: Flexboxは2つの軸で構成され、flex-directionで主軸の方向が決まる
• flex-direction: アイテムの配置方向をrow、row-reverse、column、column-reverseで制御
• flex-wrap: アイテムの折り返しをnowrap、wrap、wrap-reverseで制御
• flex-flow: flex-directionとflex-wrapのショートハンド

Flexboxは一次元レイアウトに特化しており、ナビゲーション、カードレイアウト、中央揃えなど、多くのレイアウトパターンをシンプルに実装できます。

次のステップとして、justify-content、align-items、align-selfなどの配置プロパティ、flex-grow、flex-shrink、flex-basisなどのサイズ制御プロパティを学ぶことで、より複雑なレイアウトを実現できるようになります。

参考リンク

• フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN
• CSS Flexible Box Layout Module Level 1 - W3C
• A Complete Guide to Flexbox - CSS-Tricks
• Flexbox Froggy - Flexboxを学ぶゲーム