Flexboxで横並び･中央寄せ･余白調整を一発で解決する方法
Web制作をしていると、「要素を横並びにしたい」「中央に揃えたい」「余白をうまく調整したい」といった場面に何度も出会います。昔はfloatやmarginの調整で悩むことが多かったですが、今ではCSSのFlexbox（フレックスボックス）を使えば、こうしたレイアウトの悩みは一発で解決できます。
この記事では、Flexboxを使って横並び・中央寄せ・余白調整をサクッと実現する方法を、具体的なコード例とともに解説していきます。
目次
Flexboxとは？
Flexboxは、要素の配置や並び方を柔軟に制御するためのCSSレイアウトモジュールです。親要素にdisplay: flexを指定するだけで、子要素の並び順や位置、サイズ調整が簡単に行えます。従来の方法（float、position、tableレイアウトなど）と比べて、以下のようなメリットがあります。
Flexboxのメリット
- 要素の横並びが簡単にできる
- 縦方向の中央寄せも1行で可能
- 自動で余白を調整できる
- レスポンシブ対応しやすい
横並びを一発で実現する方法
Flexboxでは初期状態が横並びのため、親要素に display: flex; を指定することで子要素が横方向に並びます。
<div class="wrap">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>.wrap {
display: flex;
gap: 1rem;
}
.box {
width: 100px;
height: 100px;
background: gray;
}
ポイント
gapを使うことでmarginを使わずに整った余白を実現できます。
中央寄せを簡単にする方法
Flexboxを使えば、横方向も縦方向も中央寄せができます。これはjustify-contentとalign-itemsの組み合わせで制御します。
.wrap {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
ポイント
アイテムを中央揃えしつつ縦並びにしたい場合は、flex-direction: column; を追加。
自動で余白を調整する方法
要素同士の間隔を自動で均等にしたいときに便利なのが、justify-content の space-* 系の値です。
.wrap {
display: flex;
justify-content: space-between;
}
- space-between → 両端詰め、間に均等なスペース
- space-around → 要素の前後に均等スペース
- space-evenly → 要素と端、すべてに均等スペース
子要素の伸縮で余白調整する場合
flex-grow を各子要素に設定すれば、余白ではなく伸縮でスペースを調整できます。これは、利用可能な余白を子要素同士でどのように分け合うかを定義するもので、全体の幅が決まっている中での自動調整が非常にスムーズです。
例えば以下のように設定すると、3つの要素に対してそれぞれ2:1:1の比率で幅が配分されます。
.box:nth-child(1) {
flex: 2;
}
.box:nth-child(2),
.box:nth-child(3) {
flex: 1;
}
このようにflex: 2などの記法を使うと、実際には flex-grow: 2; flex-shrink: 1; flex-basis: 0% と同義となり、比率ベースの柔軟な配置制御が可能になります。これにより、コンテンツ量に左右されず、整ったレイアウトを構築しやすくなります。
レスポンシブでも崩れない横並び
flex-wrap: wrap; を使えば、画面が狭くなったときに自動的に折り返すことも可能です。
.wrap {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.box {
width: 300px;
}
ポイント
・要素の最小幅と最大幅を min-width / max-width で設定しておくと、スマホ〜PCまで柔軟に対応。
・@mediaクエリと組み合わせることで、さらにレイアウトの最適化が可能。
よくあるトラブルのチェック項目
横並びにならない
- 親要素に display: flex を付け忘れていないか？
- 子要素に width が設定されすぎていないか？（合計が親幅を超えると折り返しやはみ出しが発生します）
- 子要素が display: block で特異な振る舞いをしていないか？必要なら flex: 1 を付けて様子を見ましょう。
- flex-direction のデフォルトが row であることを認識しているか？意図しない縦並びになっている可能性もあります。
中央に揃わない
- justify-content と align-items の両方を指定しているか？（片方だけでは不十分）
- コンテナに高さがないと align-items は縦方向に働きません。height または min-height を指定しましょう。
- 子要素の margin や position の設定が影響している場合があります。
間隔がうまく調整できない
- gap を使ってみる。（IE以外はサポート済。2025年現在は主要ブラウザに対応済）
- margin: auto を使うと要素が端へ押し出されて意図しない配置になることがあります。
- 要素ごとに flex-grow の値が異なると、間隔に見える形で差が生じることもあります。
- 要素の幅が固定されている場合、間隔調整は親要素のパディングで対応するのも一つの手です。
まとめ
Flexboxは、CSSレイアウトの中でも非常に実用性が高く、覚えておくと便利なプロパティばかりです。特に「横並び」「中央寄せ」「余白調整」といったレイアウトの基本動作を、一発で、しかも読みやすいコードで実現できるのが大きな魅力です。
中級者であれば、flex-grow, flex-basis, order, align-self などを組み合わせて複雑なUIパーツの整列や比率制御にも挑戦してみてください。Flexboxを使いこなすことで、あなたのCSS設計力が一段上のレベルに引き上げられるはずです。
