Bootstrap: Flexboxユーティリティクラス
最終更新：2026-08-26
1. このレッスンの紹介
(1) 前提条件
- スペーシングスケールシステム（0〜5）と方向の省略形をマスターすること
- レスポンシブなスペーシングの使用方法（例：
p-md-5）に精通していること
(2) 🎯 学習内容
d-flexを使ってFlexコンテナを有効にする方法を学ぶ- 主軸の配置（justify-content）と交差軸の配置（align-items）をマスターする
flex-wrapを使って折り返しレイアウトを作成する方法を学ぶ- 並べ替えの
order-*とフレックスのflex-fillをマスターする - 独立して完全なFlexboxレイアウトを構築できるようになる
(3) 課題点
ボブはナビゲーションバーを作成したいと考えています：ロゴは左側、ナビゲーションリンクは中央、ログインボタンは右側に配置です。従来のレイアウトではfloatやpositionを使用する必要があり、実装が煩雑でエラーが発生しやすいです。
(4) 解決策
Bootstrapは一般的なFlexboxプロパティをユーティリティクラスにカプセル化しており、1行のCSSも書かずに柔軟なレイアウトを実現できます。BootstrapのFlexboxユーティリティクラスを使用するには、d-flex justify-content-between align-items-centerの指定だけで済みます。
理解のポイント： Flexboxは、作業員が箱を並べるようなものです。主軸は方向（水平または垂直）を決定し、交差軸は配置（中央/上/下）を決定します。
justify-contentは水平方向の分配を管理し、align-itemsは垂直方向の配置を管理します。
(5) メリット
Flexboxユーティリティクラスを使用した後、ボブはわずか数個の簡潔なクラスでナビゲーションバーのレイアウトを完成させました。ロゴは左、リンクは中央、ボタンは右に配置され、コードは明確でメンテナンスしやすいです。
2. Flexコンテナの有効化
すべてのFlexユーティリティクラスはd-flexまたはd-inline-flexに基づいています：
▶ サンプル Flexコンテナの基本
HTML
<div class="d-flex bg-light p-2">d-flex - block level flex container</div>
<span class="d-inline-flex bg-info p-2 text-white">d-inline-flex - inline flex</span>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
| クラス | 効果 | CSS同等 |
|---|---|---|
d-flex |
ブロックレベルのflexコンテナ | display: flex |
d-inline-flex |
インラインflexコンテナ | display: inline-flex |
これらの2つのクラスはレスポンシブブレークポイントもサポートしています：d-sm-flex、d-md-flexなど。
3. 主軸の方向
flex-row（デフォルト）は左から右、flex-row-reverseは右から左、flex-columnは上から下に向かいます。
HTML
<div class="d-flex flex-row bg-light p-2 mb-2">
<div class="p-2 bg-primary text-white">Item 1</div>
<div class="p-2 bg-success text-white">Item 2</div>
<div class="p-2 bg-danger text-white">Item 3</div>
</div>
<div class="d-flex flex-column bg-light p-2">
<div class="p-2 bg-primary text-white">Item 1</div>
<div class="p-2 bg-success text-white">Item 2</div>
<div class="p-2 bg-danger text-white">Item 3</div>
</div>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
| クラス | 方向 | シナリオ |
|---|---|---|
flex-row |
水平（デフォルト） | ナビゲーションリンク、ボタングループ |
flex-row-reverse |
逆水平 | 右側メニュー |
flex-column |
垂直 | モバイルの垂直メニュー |
flex-column-reverse |
逆垂直 | コメントセクション（最新が上） |
4. 主軸の配置：justify-content
HTML
<div class="d-flex justify-content-start bg-light p-2 mb-2">
<div class="p-2 bg-primary text-white">Start</div>
<div class="p-2 bg-primary text-white">Start</div>
</div>
<div class="d-flex justify-content-center bg-light p-2 mb-2">
<div class="p-2 bg-success text-white">Center</div>
<div class="p-2 bg-success text-white">Center</div>
</div>
<div class="d-flex justify-content-end bg-light p-2 mb-2">
<div class="p-2 bg-danger text-white">End</div>
<div class="p-2 bg-danger text-white">End</div>
</div>
<div class="d-flex justify-content-between bg-light p-2 mb-2">
<div class="p-2 bg-info text-white">Between</div>
<div class="p-2 bg-info text-white">Between</div>
</div>
<div class="d-flex justify-content-around bg-light p-2">
<div class="p-2 bg-warning">Around</div>
<div class="p-2 bg-warning">Around</div>
</div>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
graph LR
subgraph justify-content options
A1[start] --> A2[center]
A2 --> A3[end]
A3 --> A4[between]
A4 --> A5[around]
end
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
| クラス | 効果 |
|---|---|
justify-content-start |
左揃え（デフォルト） |
justify-content-center |
中央揃え |
justify-content-end |
右揃え |
justify-content-between |
均等配置、アイテム間に均等なスペース |
justify-content-around |
アイテム周囲に均等なスペース |
justify-content-evenly |
すべてのスペースが完全に均等 |
5. 交差軸の配置：align-items
HTML
<div class="d-flex align-items-start bg-light p-2 mb-2" style="height: 80px;">
<div class="p-2 bg-primary text-white">Start</div>
<div class="p-2 bg-primary text-white">Start</div>
</div>
<div class="d-flex align-items-center bg-light p-2 mb-2" style="height: 80px;">
<div class="p-2 bg-success text-white">Center</div>
<div class="p-2 bg-success text-white">Center</div>
</div>
<div class="d-flex align-items-end bg-light p-2" style="height: 80px;">
<div class="p-2 bg-danger text-white">End</div>
<div class="p-2 bg-danger text-white">End</div>
</div>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
| クラス | 効果 | CSS同等 |
|---|---|---|
align-items-start |
上揃え | align-items: flex-start |
align-items-center |
垂直中央揃え | align-items: center |
align-items-end |
下揃え | align-items: flex-end |
align-items-stretch |
伸縮して埋める（デフォルト） | align-items: stretch |
典型的なシナリオ：
align-items-centerは垂直中央揃えの最も一般的な解決策です。親コンテナにd-flex+align-items-centerを設定すると、コンテンツは自動的に垂直中央に配置されます。
6. 個別アイテムの配置：align-self
HTML
<div class="d-flex bg-light p-2" style="height: 100px;">
<div class="p-2 bg-primary text-white align-self-start">Start</div>
<div class="p-2 bg-success text-white align-self-center">Center</div>
<div class="p-2 bg-danger text-white align-self-end">End</div>
</div>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
7. 折り返し：flex-wrap
HTML
<div class="d-flex flex-wrap bg-light p-2">
<div class="p-3 m-1 bg-primary text-white">Item 1</div>
<div class="p-3 m-1 bg-primary text-white">Item 2</div>
<div class="p-3 m-1 bg-primary text-white">Item 3</div>
<div class="p-3 m-1 bg-primary text-white">Item 4</div>
<div class="p-3 m-1 bg-primary text-white">Item 5</div>
<div class="p-3 m-1 bg-primary text-white">Item 6</div>
</div>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
| クラス | 動作 |
|---|---|
flex-nowrap |
折り返しなし、アイテムが圧縮される（デフォルト） |
flex-wrap |
自動折り返し |
flex-wrap-reverse |
逆方向の折り返し |
8. 並べ替え：order
HTML
<div class="d-flex bg-light p-2">
<div class="p-3 bg-danger text-white order-3">First in HTML (order-3)</div>
<div class="p-3 bg-success text-white order-1">Second in HTML (order-1)</div>
<div class="p-3 bg-primary text-white order-2">Third in HTML (order-2)</div>
</div>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
order-0〜order-5、数値が小さい方が先に表示されます。すべてのアイテムのデフォルトはorder-0です。
9. フレックス：flex-growとflex-fill
HTML
<div class="d-flex bg-light p-2">
<div class="p-3 bg-danger text-white">Fixed</div>
<div class="p-3 bg-success text-white flex-fill">flex-fill</div>
<div class="p-3 bg-primary text-white flex-fill">flex-fill</div>
</div>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
| クラス | 効果 | CSS |
|---|---|---|
flex-fill |
残りのスペースを均等に分配 | flex: 1 1 auto |
flex-grow-0 |
成長しない（デフォルト） | flex-grow: 0 |
flex-grow-1 |
成長して埋める | flex-grow: 1 |
flex-shrink-0 |
縮小しない | flex-shrink: 0 |
10. Flexユーティリティクラス チートシート
(1) Flexプロパティ クイックリファレンス
| カテゴリ | クラス | CSS同等 | 説明 |
|---|---|---|---|
| コンテナ | d-flex |
display: flex |
ブロックレベルのflexコンテナ |
| コンテナ | d-inline-flex |
display: inline-flex |
インラインflexコンテナ |
| 方向 | flex-row |
flex-direction: row |
水平レイアウト（デフォルト） |
| 方向 | flex-column |
flex-direction: column |
垂直レイアウト |
| 方向 | flex-row-reverse |
flex-direction: row-reverse |
逆水平 |
| 方向 | flex-column-reverse |
flex-direction: column-reverse |
逆垂直 |
| 主軸 | justify-content-* |
justify-content: * |
主軸の配置 |
| 交差軸 | align-items-* |
align-items: * |
交差軸の配置 |
| 個別アイテム | align-self-* |
align-self: * |
個別アイテムの配置 |
| 折り返し | flex-wrap |
flex-wrap: wrap |
自動折り返し |
| 折り返し | flex-nowrap |
flex-wrap: nowrap |
折り返しなし（デフォルト） |
| 並べ替え | order-{0-5} |
order: {0-5} |
表示順序の調整 |
| フレックス | flex-fill |
flex: 1 1 auto |
残りのスペースを均等に分配 |
| フレックス | flex-grow-1 |
flex-grow: 1 |
成長して埋める |
| フレックス | flex-shrink-0 |
flex-shrink: 0 |
縮小を禁止 |
(2) justify-contentの値の解説
| クラス | 効果 | 図 | ユースケース |
|---|---|---|---|
justify-content-start |
左揃え（デフォルト） | ████░░░░ | 標準的な左揃え |
justify-content-center |
中央揃え | ░░████░░ | センターレイアウト |
justify-content-end |
右揃え | ░░░░████ | 右側アクションバー |
justify-content-between |
均等配置 | █░░█░░██ | ナビゲーションバー |
justify-content-around |
アイテム周囲に均等なスペース | ░█░█░█░█░ | アイコンツールバー |
justify-content-evenly |
すべてのスペース均等 | ░█░░█░░█░ | 均等に分配されたメニュー |
(3) align-itemsの値の解説
| クラス | 効果 | 図 | ユースケース |
|---|---|---|---|
align-items-start |
上揃え | 上揃え | 上部ベースラインの配置 |
align-items-center |
垂直中央揃え | 中央揃え | 垂直中央揃えに最も一般的 |
align-items-end |
下揃え | 下揃え | 下部アクションバー |
align-items-stretch |
伸縮して埋める | 等高 | 等高のカードカラム |
align-items-baseline |
テキストベースライン揃え | ベースライン | 異なるフォントサイズのテキスト |
▶ サンプル ナビゲーションバー
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Navbar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="d-flex justify-content-between align-items-center bg-dark text-white p-3">
<div class="fw-bold fs-5">MyLogo</div>
<ul class="d-flex list-unstyled gap-4 mb-0">
<li><a href="#" class="text-white text-decoration-none">Home</a></li>
<li><a href="#" class="text-white text-decoration-none">Products</a></li>
<li><a href="#" class="text-white text-decoration-none">About</a></li>
<li><a href="#" class="text-white text-decoration-none">Contact</a></li>
</ul>
<button class="btn btn-light btn-sm">Login</button>
</nav>
<div class="container mt-4">
<p>Use <code>justify-content-between</code> to achieve logo on the left, navigation centered, and button on the right.</p>
</div>
</body>
</html>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
▶ サンプル カードグリッド
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Grid</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h3 class="mb-4">Flex Card Grid</h3>
<div class="d-flex flex-column flex-md-row gap-3">
<div class="card flex-fill">
<div class="card-body">
<h5 class="card-title">Card One</h5>
<p class="card-text">flex-fill makes all cards equal width.</p>
<a href="#" class="btn btn-primary">View</a>
</div>
</div>
<div class="card flex-fill">
<div class="card-body">
<h5 class="card-title">Card Two</h5>
<p class="card-text">Use gap-3 to control card spacing.</p>
<a href="#" class="btn btn-success">View</a>
</div>
</div>
<div class="card flex-fill">
<div class="card-body">
<h5 class="card-title">Card Three</h5>
<p class="card-text">flex-column for mobile vertical, flex-md-row for desktop horizontal.</p>
<a href="#" class="btn btn-outline-primary">View</a>
</div>
</div>
</div>
</div>
</body>
</html>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
▶ サンプル 中央揃えのログインフォーム
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Login</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="d-flex justify-content-center align-items-center bg-light" style="min-height: 100vh;">
<div class="bg-white p-4 rounded shadow" style="width: 100%; max-width: 400px;">
<h3 class="text-center mb-4">User Login</h3>
<form>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="name@example.com">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="Enter your password">
</div>
<button type="submit" class="btn btn-primary w-100">Login</button>
</form>
<p class="text-center text-muted small mt-3 mb-0">
Don't have an account? <a href="#">Sign up now</a>
</p>
</div>
</div>
</body>
</html>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
▶ サンプル メディアオブジェクト
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Object</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h3 class="mb-4">Flex Media Object</h3>
<div class="d-flex gap-3 mb-4">
<div class="bg-primary text-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;">
A
</div>
<div>
<h5 class="mb-1">Alice Wang</h5>
<p class="mb-0 text-muted small">flex-shrink-0 ensures the avatar is not compressed. Use d-flex + gap-3 for text-image layout, which is the recommended implementation for Bootstrap media objects.</p>
</div>
</div>
<div class="d-flex gap-3">
<div class="bg-success text-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;">
B
</div>
<div>
<h5 class="mb-1">Bob Chen</h5>
<p class="mb-0 text-muted small">align-self-center can vertically center the avatar relative to the text, useful when avatar heights vary.</p>
</div>
</div>
</div>
</body>
</html>
出力： Bootstrap 5.3のスタイルが適用されたコンポーネントの効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。
❓ よくある質問
Q
d-flexを使用しているのに、アイテムが横並びになりません。なぜですか？A Flexboxはデフォルトで
flex-direction: row（水平レイアウト）です。他のCSSがdisplayの値を上書きしていないか、子要素がwidth: 100%のブロックレベル要素になっていないか確認してください。Q
justify-content-betweenとjustify-content-aroundの違いは何ですか？A
betweenは最初と最後のアイテムをコンテナの端に配置し、その間に均等なスペースを分配します。aroundは各アイテムの左右に均等なスペースを割り当てるため、端の隙間は中間の隙間の半分になります。ブラウザのDevToolsでクラスを変更してリアルタイムに比較できます。Q 垂直中央揃えにはFlexboxを使わなければなりませんか？
A 高さが既知のコンテナでは、
line-heightやposition + transformも使用できます。ただし、Flexboxのd-flex align-items-centerが最も簡潔で汎用的な方法です。コンテナの高さに依存せず、レスポンシブブレークポイントとの互換性も最も優れています。Q いつFlexboxを使い、いつGridを使うべきですか？
A Flexboxは1次元レイアウト（行または列）に適しています。ナビゲーションバー、ボタングループ、メディアオブジェクトなどです。Gridは2次元レイアウト（行と列を同時制御）に適しています。ページのメインレイアウトやカードグリッドなどです。シンプルなルール：単一行または単一列にはFlexbox、行と列を同時に制御する場合はGridを使用します。どちらもネストできます。
Q
align-contentとalign-itemsの違いは何ですか？A
align-itemsは単一行内のアイテムの配置を制御し、align-contentは交差軸に沿った複数行の分配を制御します。align-contentはflex-wrap: wrapが設定され、複数行がある場合にのみ有効になります。Bootstrapはalign-content-*シリーズのユーティリティクラス（例：align-content-center、align-content-between）を提供しています。📖 まとめ
d-flexでflexコンテナを有効にし、flex-row/columnで方向を制御するjustify-content-*で主軸の配置を制御し、align-items-*で交差軸の配置を制御するalign-self-*で個別アイテムを制御するflex-wrapで折り返しを制御し、order-*で並べ替えを制御し、flex-fillで伸縮を制御する
📝 練習問題
- ⭐ ナビゲーションバーを作成しましょう：ロゴは左側、4つのリンクは中央、ログインボタンは右側に配置し、
justify-content-betweenとalign-items-centerを使用します。 - ⭐⭐ 3列のカードグリッドを作成しましょう：モバイルでは垂直（
flex-column）、タブレット以上では水平（flex-md-row）にし、カード間にgap-3を設定します。 - ⭐⭐⭐ Flexboxインタラクティブアニメーションページを作成しましょう：6つの
justify-contentの値すべての効果をデモンストレーションし、それぞれにテキストの説明と3つの色付きブロックを含めます。
前のレッスン： スペーシング · 次のレッスン： レスポンシブデザイン
