Flexbox（フレックスボックス）は、CSSで要素を柔軟に配置するためのレイアウト機能です。display: flex;を指定するだけで、要素を横並びや縦並びにしたり、中央揃えにしたりと、さまざまなレイアウトを簡単に作成できます。
以前は、Webページのレイアウトを作る際にfloatを使うことが一般的でした。しかし、現在ではよりシンプルで扱いやすいFlexboxが主流となり、多くのWebサイトで利用されています。そのため、HTML・CSSを学ぶ初心者にとっても、Flexboxはぜひ身に付けておきたい基本知識の一つです。
この記事では、CSSフレックスボックス（Flexbox）の基本的な仕組みやdisplay: flex;の書き方、親要素と子要素の関係、よく使われるレイアウト例を、サンプルコードを交えながら初心者にもわかりやすく解説します。
なお、justify-contentやalign-items、flex-directionなどの各プロパティについては、それぞれ別記事で詳しく紹介しています。本記事ではまずFlexboxの全体像を理解し、「どのような場面で使うのか」「どのように書けばよいのか」を学んでください。
CSSフレックスボックス（Flexbox）とは？
Flexbox（フレックスボックス）とは、CSSで要素を柔軟に配置するためのレイアウト機能です。
正式名称は「Flexible Box Layout（フレキシブルボックスレイアウト）」で、要素を横並びや縦並びに配置したり、中央揃えにしたりするレイアウトを簡単に作成できます。
従来は、要素を横並びにするためにfloatなどを使用することが一般的でした。しかし、レイアウトが複雑になるとコード量が増え、思い通りに配置することが難しいという課題がありました。
Flexboxでは、親要素に display: flex; という1行を指定するだけで、子要素をFlexboxのレイアウトルールに従って横並びや縦並びに配置できるほか、複雑な中央揃えや均等配置なども簡単に実現できます。
そのため、現在ではHTML・CSSでよりシンプルで柔軟なレイアウトを作成する際の基本的な方法として広く利用されています。
Flexboxとはレイアウトを簡単に作れるCSSの機能
Flexboxを使用するには、親要素にdisplay: flex;を指定します。
例えば、次のようなHTMLがあるとします。
<div>ボックス1</div>
<div>ボックス2</div>
<div>ボックス3</div>
</div>
ブラウザでの表示
通常は子要素が縦方向に並びますが、CSSで親要素にdisplay: flex;を指定すると、子要素は横方向へ並びます。
HTML
<div>ボックス1</div>
<div>ボックス2</div>
<div>ボックス3</div>
</div>
CSS
display: flex;
}
ブラウザでの表示
HTMLでは縦に並んでいたはずの「ボックス1〜3」が、魔法のように一瞬でキレイに横一列に並びます。
このように、display: flex;を指定するだけでレイアウト方法が変わることが、Flexboxの大きな特徴です。
また、Flexboxでできることは横並びだけではありません。
・要素を縦方向に並べる
・要素を左右中央に配置する
・要素を上下中央に配置する
・要素同士の間隔を均等にする
・画面幅に応じて折り返す
など、さまざまなレイアウトをシンプルなコードで作成できます。
Flexbox（フレックスボックス）が使われる理由
- 横並びが簡単
親要素にdisplay: flex;を指定するだけで横並びになります。 - 中央寄せが簡単
以前のCSSでは難しかった上下左右の中央揃えも、Flexboxなら専用のプロパティを使って簡単に実現できます。 - レスポンシブデザインに対応しやすい
スマートフォンやタブレットなど、画面サイズに応じてレイアウトを変更しやすいこともFlexboxの特徴です。
要素の並び順や折り返しを柔軟に変更できるため、レスポンシブデザインとの相性が良く、多くのWebサイトで採用されています。 - コード量を減らせる
複雑なCSSを書く必要が少なくなり、コードがシンプルで読みやすく、メンテナンスもしやすくなります。
display: flexの基本的な書き方
Flexboxを使って要素を横並びにする手順は、驚くほどシンプルです。
最大のポイントは「横に並べたい要素自体（子要素）ではなく、それらを囲んでいる外枠（親要素）にCSSを書く」という点です。
実際に、3つのボックスを横に並べる具体的な手順とコードを見ていきます。
HTMLを書く
横に並べたい要素を、1つの大きなグループ（親要素）で囲みます。
ここでは、親要素に f-box、中身の子要素に item というクラス名をつけています。
HTML
-- 全体を囲む親要素 --><div class=”f-box”><!
-- 横に並べたい子要素たち --><div class=”item”>ボックス1</div>
<div class=”item”>ボックス2</div>
<div class=”item”>ボックス3</div>
</div>
CSSを書く
一番大切なポイントです。横並びにするために、全体を囲んでいる親要素（.f-box）に対して display: flex; を指定します。
子要素（.item）には、横並びにするためのCSSは一切書く必要がありません。
.f-box {
display: flex;
}/* （以下は見た目を分かりやすくするための装飾用CSSです） */
.item {
background-color: #3498db;
color: white;
padding: 20px;
margin: 10px;
}
実行結果
HTMLを普通に書いただけでは上から下へ縦に並んでいた「ボックス1〜3」が、親要素に display: flex; を記述した瞬間、魔法のように一瞬でキレイに横一列に並びます。
「横に並べたい要素たちの『親』に書く」というこの基本ルールさえ押さえれば、Flexboxの第一歩はクリアです！
Flexboxの仕組みを理解しよう
Flexboxを使いこなすためには、まず親要素（Flex Container）と子要素（Flex Item）の関係を理解することが大切です。
Flexboxでは、display:flex; を指定する場所と、実際にレイアウトが変化する要素が異なります。
ポイントは、Flexboxの設定は親要素に書き、配置が変わるのはその中にある子要素ということです。
実際のHTMLとCSSのコードを見ながら、どこがどう繋がっているかを確認してみましょう。
HTML
-- HTMLの構造 --><div class=”flex-container”> <!
-- ← ① 親要素（Flex Container） --><div class=”item”>子要素1</div> <!
-- ← ② 子要素（Flex Item） --><div class=”item”>子要素2</div> <!
-- ← ② 子要素（Flex Item） --><div class=”item”>子要素3</div> <!
-- ← ② 子要素（Flex Item） -->CSS
.flex-container {
display: flex; /* ★ここに書くことで、直下の子要素たちが自動的に横並びになります */
}
この場合、
- 外側の div class=”flex-container” → 親要素（Flex Container）
- 内側の3つ（ボックス1～3）の div → 子要素（Flex Item）
になります。
親要素（Flex Container）とは？
親要素（Flex Container）とは、display:flex; を指定する要素のことです。
Flexboxを有効にするには、親要素に以下のようにCSSを書きます。
display: flex;
}
display:flex; を指定すると、その要素は Flex Container に変身し、中にある子要素を Flexbox のルールに従って配置できるようになります。
重要なのは、display:flex; は横並びにしたい要素自身ではなく、その一階層上にある外側の親要素に指定するという点です。
イメージとしては、親要素が「子要素を並べるための特別な箱」になると考えると分かりやすいです。
つまりFlexboxでは、
親要素に設定を書くことで、中にある子要素の並び方をコントロールする
というのが、Flexboxの基本システムです。
子要素（Flex Item）とは？
子要素（Flex Item）とは、Flex Container（親要素）のすぐ中に入っている要素のことです。専門用語で「フレックスアイテム（Flex Item）」と呼びます。
子要素（Flex Item）は、親要素に設定されたFlexboxのルールによって、自動的に配置が変化します。
例えば、親要素側のCSSを切り替えるだけで、子要素に対して以下のような操作をすべて一括でコントロールできます。
・横方向に並べる
・縦方向に並べる
・画面の真ん中に配置する
・要素同士の間隔をきれいに空ける
⚠️初心者向けの重要ポイント
Flexboxのルールが適用されるのは、親要素の「直下にある子要素だけ」です。
子要素の中にさらに文字や画像（孫要素）が入っていても、その孫要素の配置までは変わりません。
ルールが及ぶのはあくまで「1つ下の階層まで」と覚えておきましょう！
display:flexで横並びになる理由
CSSのdisplay: flex;を指定すると要素が横並びになる理由は、Flexbox（Flex Container）の初期設定（デフォルト値）にあります。
- 主軸の方向（flex-direction）の初期値が「横向き」だから
display: flex;を書くと、その要素は「親コンテナ」になり、中にある子要素は「Flexアイテム」に変化します。
このとき、アイテムを並べる方向を決めるflex-directionプロパティが自動的に適用されます。このプロパティの初期値がrow（左から右への横並び）であるため、指定しただけで自動的に横に並びます。- flex-direction: row;（初期値）：左から右へ横並び
- flex-direction: column;：上から下へ縦並び（元のブロック要素のような並び）
- 子要素の性質が「Flexアイテム」に変わるから
通常、<div> や <p> などのブロック型要素は、1行を丸ごと占有するため縦に積み重なっていきます。
しかし、親要素にdisplay: flex;を指定すると、子要素は強制的に「Flexアイテム」という特殊な状態になります。
Flexアイテムになると、元のブロック要素としての「1行占有する」という性質が打ち消され、主軸（初期状態では横方向）に沿って詰め込まれるようになります。 - 折り返さない設定（flex-wrap）が初期値だから
Flexboxは、初期状態ではどれだけ子要素が多くても、あるいは子要素の幅が広くても、1行に収めようとする性質（flex-wrap: nowrap;）を持っています。そのため、画面幅に収まらない場合でも、子要素は自動的に縮小されて横一列に並び続けます。
初期設定では「1行に収めようとする（折り返さない）」という性質があるため、要素は横一列に並び続けます。
しかし、「自動で縮小する」ことには限界があるため、限界を超えると画面を突き抜けて右側にはみ出し、横スクロール（画面の横揺れ）が発生します。
スマホ、タブレット、パソコン（PC）のどの画面であっても、「永遠に縮小されて1画面に収まり続ける」わけではありません。
なぜ画面を突き抜けて右側に広がってしまうのか、その仕組みと理由を解説します。
なぜ画面を突き抜けて横に広がってしまうのか？
原因は、主に以下の2つのステップで発生します。
- 子要素の中身（テキストや画像）に「最小幅」があるから
Flexboxは画面幅に合わせて子要素を自動で縮小しようと試みます。しかし、文字がこれ以上改行できない幅（英語の単語の長さや、日本語の最小単位など）や、画像そのものが持つ最小サイズ、またはCSSで設定されたmin-width（最小幅）を下回る位置までは縮小できません。 - 縮小の限界を迎えると、画面幅（親要素の幅）をオーバーする
画面幅が狭いスマホはもちろん、タブレットや、ブラウザのウィンドウを小さくしたPC画面などにおいて、並べる子要素の数が多いと、すべての要素が「これ以上縮小できない限界」に達しても画面の中に収まりきらなくなります。その結果、収まらなかった分が右側へはみ出し、ページ全体に意図しない横スクロールが発生してしまいます。
画面サイズに関わらず「はみ出し」を防ぐ2つの対策
さまざまな画面サイズに対応するWebデザイン（レスポンシブ対応）では、レイアウトの目的に応じて以下のいずれかの対策を必ず行います。
- 対策1：画面幅に応じて自動で折り返させる
親要素にflex-wrap: wrap;を指定します。これにより、スマホやタブレットなどの狭い画面で1行に収まらなくなった子要素は、画面を突き抜けることなく、自動的に次の行（下）へ送られて綺麗に並びます。 - 対策2：子要素の縮小率や幅を固定・微調整する
あえて折り返させずに横一列のまま見せたい場合は、子要素にflex-shrink: 0;を指定して縮小をブロックし、はみ出た部分だけを特定の枠内でスワイプできるように「要素専用の横スクロール」を作ります。または、flex: 1;を指定して、どの画面幅でも均等かつ美しく縮小・拡大するように全体のバランスを微調整します。
Flexboxでよく使うプロパティ
Flexboxのレイアウト調整で頻繁に使用する代表的なプロパティです。ここでは概要のみを簡単に紹介します。
| プロパティ | 役割 |
|---|---|
| justify-content | 左右方向（主軸）の配置を決める |
| align-items | 上下方向（交差軸）の配置を決める |
| flex-direction | 要素が並ぶ方向（横並び・縦並び）を決める |
| flex-wrap | 要素を1行に収めるか、折り返すかを決める |
| gap | 並んだ要素と要素の間のスキマ（余白）を決める |
それぞれの詳しい特徴と使い方のイメージは以下の通りです。
justify-content
並んだ要素の「左右方向（主軸）」の配置をコントロールします。左寄せ、右寄せ、中央揃え、均等配置などが設定できます。
justify-content: center; /* 中央揃えになる */HTML
<div class=”item”%gt;1</div%gt;
<div class=”item”%gt;2</div%gt;
<div class=”item”%gt;3</div%gt;
</div>
CSS
display: flex;
justify-content: center; /* 中央に寄せる */
}
ブラウザでの表示
align-items
並んだ要素の「上下方向（交差軸）」の配置をコントロールします。上寄せ、下寄せ、上下中央揃えなどが設定できます。
align-items: center; /* 上下方向の真ん中（縦中央）になる */HTML
<div class=”item”%gt;1</div%gt;
<div class=”item”%gt;2</div%gt;
<div class=”item”%gt;3</div%gt;
</div>
CSS
display: flex;
height: 100px; /* 親に高さを指定 */
align-items: center; /* 上下の真ん中に寄せる */
}
ブラウザでの表示
flex-direction
要素を並べる基準となる方向を決めます。初期設定の横並びから、縦並びへと変更したいときなどに重宝します。
flex-direction: column; /* 上から下への「縦並び」になる */HTML
<div class=”item”%gt;1</div%gt;
<div class=”item”%gt;2</div%gt;
<div class=”item”%gt;3</div%gt;
</div>
CSS
display: flex;
flex-direction: column; /* 縦並びにする */
}
ブラウザでの表示
青枠が画面の横幅いっぱいに広がる理由については「ボタンが画面の横幅いっぱいに広がった原因：ブロック要素は「横幅の初期値が100%」だから」を確認してください。
flex-wrap
要素が画面幅に収まらなくなったときに、1行に詰め込む（縮小させる）か、次の行へ折り返して配置するかを決めます。
flex-wrap: wrap; /* 画面幅に合わせて自動で「折り返す」 */HTML
<div class=”item”%gt;1</div%gt;
<div class=”item”%gt;2</div%gt;
<div class=”item”%gt;3</div%gt;
</div>
CSS
display: flex;
flex-wrap: wrap; /* 画面幅に合わせて自動で折り返す */
}
ブラウザでの表示
gap
要素同士の間隔（スキマ）を、親要素側から一括で設定できます。marginを使って個別に隙間を空ける必要がなくなります。
gap: 20px; /* 要素の間に20pxの余白を設定できる */HTML
<div class=”item”%gt;1</div%gt;
<div class=”item”%gt;2</div%gt;
<div class=”item”%gt;3</div%gt;
</div>
CSS
display: flex;
gap: 20px; /* 要素の間に20pxの余白を設定 */
}
ブラウザでの表示
Flexboxを使うときの注意点：Grid（グリッド）との使い分け
CSSには、Flexboxと似たレイアウトの仕組みとして「CSS Grid（グリッド）」というものがあります。
初心者のうちは「どちらを使えばいいの？」と迷いがちですが、この2つは得意分野（用途）が全く異なります。
- Flexboxは「1方向（1次元）」の整列が得意
これまで解説してきた通り、要素を「横一列」に並べたり、それを「折り返して」並べたりするような、直線的な並び方をコントロールするのが得意です。
メニューバーやカードの並びなど、ほとんどのレイアウトはFlexboxで完結します。 - Gridは「縦と横（2次元）」の格子状レイアウトが得意
Gridとは、画面に「碁盤の目（方眼紙）」のような縦横のマス目を引き、そのマス目に沿って要素をパズルのように配置していく仕組みです。
新聞の紙面のように「ここは縦2マス×横3マスの巨大な枠」「その隣は小さな枠」といった、縦横が複雑に連動するレイアウトを作るのが得意です。
基本的には「普段の横並びはすべてFlexbox」を使い、Flexboxでは位置合わせがどうしても難しくなるような「複雑なタイル型のレイアウト」を作りたいときだけ、Gridの採用を検討する、という使い分けで覚えておけば間違いありません。
