「要素を横並びにしたいのに、どうしても縦に並んでしまう」 「中央寄せにしたいだけなのに、コードが複雑になってしまった」
Web制作を始めたばかりの方が、一番最初にぶつかる大きな壁が「レイアウト」です。その悩みをたった1行で解決し、自由自在な配置を可能にするのが Flexbox（フレックスボックス） です。
本記事では、Flexboxの魔法の合言葉 display: flex; の使い方から、実務で頻繁に使う配置のテクニックまで、現役エンジニアの視点で分かりやすく図解とともに解説します。
Flexboxとは？「魔法の箱」の仕組みを理解しよう
Flexboxは「Flexible Box Layout Module」の略で、その名の通り要素を柔軟に（Flexible）配置するための仕組みです。
1-1. 親と子の関係がすべて
Flexboxを理解する最大のコツは、要素を「親」と「子」に分けて考えることです。
- 子要素（フレックスアイテム）: 指示に従う側。親の命令通りに並びます。
- 親要素（フレックスコンテナ）: 指示を出す側。「横に並べ！」「間隔を空けろ！」と命令します。
基本中の基本：display: flex を書く場所
横並びにしたい要素そのものではなく、その「親」に対して display: flex; を指定します。
<div class="container"> <!-- これが親（命令を出す人） -->
<div class="item">1</div> <!-- これが子 -->
<div class="item">2</div> <!-- これが子 -->
<div class="item">3</div> <!-- これが子 -->
</div>.container {
display: flex; /* これだけで子が横に並びます！ */
}たったこれだけで、縦に並んでいた要素が吸い付くように横一列に並びます。これがFlexboxの第一歩です。
実務で毎日使う！最強の配置プロパティ3選
横に並べるだけでは不十分です。「中央に寄せたい」「均等に並べたい」といった要望を叶える3つのプロパティを紹介します。
justify-content（横方向の揃え）
親要素に指定し、子要素を横方向にどう並べるかを決めます。
- center：中央寄せ（一番よく使います！）
- space-between：両端に寄せて、感覚を均等にする（ナビゲーションメニューに最適）
- flex-end：右寄せ
align-items（縦方向の揃え）
子要素の高さがバラバラでも、これを使えば一瞬で綺麗に揃います。
- center：上下中央寄せ
- stretch：親の高さに合わせて目一杯広がる（デフォルト）
flex-wrap（折り返し）
デフォルトでは、要素が多くなっても無理やり1行に収めようとします。
- wrap：枠に入りきらなくなったら、自動で2行目に折り返します。
【実践サンプル】よくある「ナビゲーションメニュー」を作ろう
それでは、これまでの知識を総動員して、実践で使える「横並びメニュー」を作ってみましょう。
HTML
<nav class="navbar">
<div class="logo">My Logo</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>CSS
.navbar {
display: flex;
justify-content: space-between; /* ロゴとメニューを両端に離す */
align-items: center; /* 上下中央に揃える */
background-color: #333;
padding: 10px 20px;
color: white;
}
.nav-links {
display: flex; /* リスト項目(li)を横に並べるためにここもflex！ */
list-style: none; /* 点を消す */
margin: 0;
padding: 0;
gap: 20px;
}実行結果のポイント
- 二重のFlexbox：全体の枠組み（.navbar）を横並びにするためにdisplay: flexを使い、さらに右側のメニューリスト（.nav-links）も横に並べるためにdisplay: flexを使っています。
- 上下中央：ロゴとメニューの高さが違っても、align-items: centerのおかげで綺麗に中心で揃います。
なぜfloatではなくFlexboxなのか？
かつてのWeb制作において、横並びを作る唯一の手法は float: left; でした。しかし、現在では特別な理由がない限り float をレイアウトに使うことはありません。その決定的な理由をプロの視点で解説します。
「浮いている」状態を制御するストレスからの解放
float は本来「画像の周りに文字を回り込ませる」ための機能です。要素を無理やり浮かせて横に並べるため、後に続く要素が意図せず回り込んでしまい、レイアウトが崩れることが日常茶飯事でした。 これを防ぐには「clearfix」などの複雑な解除コードが必要でしたが、Flexboxは「箱の中のルール」として完結するため、後続の要素に悪影響を与えることが一切ありません。
1pxの狂いも許さない「自動計算」の精度
float 時代は、3カラムを作る際に width: 33.333% と計算し、さらに padding や border があると box-sizing を調整……と、常に算数が必要でした。 Flexboxなら flex: 1 と書くだけで、親要素の幅に合わせて子要素のサイズを自動調整してくれます。これにより、デバイスごとに画面幅が異なる現代でも、1pxもズレない正確なレイアウトが維持できるのです。
垂直方向（上下）の制御という「革命」
Web制作の歴史の中で、最も難しかったことの一つが「上下中央寄せ」です。float では不可能に近かったこの操作も、Flexboxなら align-items: center; の一行で終わります。この圧倒的な効率の差が、float を過去の遺物へと追いやったのです。
余白の新常識：gapプロパティで「間隔」を操る
Flexboxを使いこなす上で、多くの初心者が「子要素同士の間にだけ隙間を開けたい」と悩み、margin を使って苦戦します。そこで登場するのが、最新のCSS標準である gap プロパティです。
margin地獄からの卒業
これまでは、要素間に余白を作るために margin-right: 20px を設定し、さらに「一番最後の要素だけ margin-right: 0; にする」といった面倒な指定が必要でした。
gapなら一行で解決
.container {
display: flex;
gap: 20px; /* 要素の「間」にだけ20pxの余白を作る */
}gap を使えば、要素の数が増えても、折り返して2行になっても、「要素と要素の間」にだけ正確に余白が入ります。 外側のレイアウトを崩さずに内側の間隔だけを制御できるため、現在のコーディング現場では gap の使用が強く推奨されています。
実務でよくあるトラブルと解決策
要素が勝手に縮んでしまう
子要素に width を指定しているのに、Flexboxの中で勝手に幅が狭くなってしまうことがあります。これはFlexboxの「縮む性質」が原因です。
- 解決策：子要素に flex-shrink: 0; を指定すると、元の幅を維持できます。
margin: auto との組み合わせ
Flexboxの中で特定の要素だけ右端に飛ばしたい場合、その要素に margin-left: auto; を指定すると、残りのスペースをすべてマージンが埋めてくれるため、きれいに右寄せができます。
【関連記事】：余白の基礎である「marginとpaddingの違い」については、「【CSS基礎】marginとpaddingの違いとは？width・borderを含めたボックスモデルを使いで解説」で詳しく紹介しています。
まとめ：Flexboxを制する者はWebデザインを制す
Flexboxは、最初はプロパティが多くて難しく感じるかもしれませんが、基本はたったこれだけです。
- 親要素に display: flex を書く。
- 横の配置は justify-content 。
- 縦の配置は align-items 。
- 折り返しは flex-wrap 。
これさえ覚えておけば、世の中にあるWebサイトのレイアウトの8割は再現できます。まずは、3つの箱を並べて中央に寄せる練習から始めてみてください。その瞬間に、あなたのCSSスキルは「初心者」を卒業し、一段上のステージへと進んでいるはずです！
