Flexboxで横並び・中央寄せ・余白を整える実務CSS入門
Flexboxは、HTML要素を横並びにしたり、上下左右の中央に置いたり、カードやボタンの余白をそろえたりするときに使うCSSのレイアウト機能です。実務では、ナビゲーション、ボタン群、プロフィール欄、料金カード、WordPressテーマ内のブロック調整などでよく使います。
最初に押さえるべき結論はシンプルです。Flexboxは「親要素に display: flex; を指定して、子要素の並び方を親側から制御する」仕組みです。横並びにしたい子要素へ個別に float や margin を重ねるより、親にルールを書くほうが崩れにくくなります。
この記事では、実務で使う頻度が高い次のパターンに絞って整理します。
- 横並びにする
- 中央寄せする
- 要素間の余白をそろえる
- 折り返してカードを並べる
- よくある「中央に来ない」「幅が崩れる」原因を直す
対象はHTML/CSSの基本を少し触ったことがある初心者から実務初級者です。CSS仕様としてはFlexbox、実装確認の入口として MDN Web DocsのFlexbox解説 を参照しながら、ブラウザでそのまま試せる形にしています。
Flexboxの基本は「親に指定、子が並ぶ」
Flexboxで一番大事なのは、指定する場所を間違えないことです。
次のHTMLを例にします。
<div class="menu">
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">お問い合わせ</a>
</div>
この3つのリンクを横に並べる場合、CSSは子要素の a ではなく、親要素の .menu に書きます。
.menu {
display: flex;
gap: 16px;
}
これだけで、リンクは横並びになり、リンク同士の間に16pxの余白が入ります。
親に書く主なプロパティ
Flexboxでは、親要素に書くプロパティが中心です。
display: flex;：Flexboxを有効にするflex-direction：横並びか縦並びかを決めるjustify-content：主軸方向の揃え方を決めるalign-items：交差軸方向の揃え方を決めるgap：子要素同士の余白を決めるflex-wrap：入りきらないときに折り返すかを決める
ここでいう「主軸」は、要素が並ぶ方向です。初期値では左から右へ横に並ぶので、主軸は横方向です。flex-direction: column; にすると縦方向が主軸になります。
ここがポイント: 横並び、中央寄せ、余白調整の多くは、子要素ではなく親要素のCSSを見直すと解決しやすくなります。
横並びは display: flex と gap から始める
横並びの基本形は、親に display: flex; を指定し、余白は gap で管理します。
以前のCSSでは、横並びに float や inline-block を使うこともありました。しかし、実務で新しく書くレイアウトなら、ナビゲーションやボタン群はFlexboxから始めるほうが扱いやすい場面が多いです。
入力例：ボタンを横に並べる
<div class="actions">
<a class="button primary" href="#">資料をダウンロード</a>
<a class="button" href="#">問い合わせる</a>
</div>
.actions {
display: flex;
gap: 12px;
align-items: center;
}
.button {
display: inline-block;
padding: 10px 16px;
border: 1px solid #2563eb;
color: #2563eb;
text-decoration: none;
}
.button.primary {
background: #2563eb;
color: #fff;
}
出力イメージ
- 2つのリンクが横に並ぶ
- ボタン同士の間隔が12pxになる
- 高さが違っても中央でそろいやすい
gap を使うと、最初や最後の要素に余計な margin が付きません。たとえば「最後のボタンだけ右に余白が残る」といった調整ミスを避けやすくなります。
margin-right より gap を優先したい場面
要素間の余白だけを作りたいなら、まず gap を検討します。
/* 調整が増えやすい例 */
.actions a {
margin-right: 12px;
}
.actions a:last-child {
margin-right: 0;
}
/* Flexboxではこちらが読みやすい */
.actions {
display: flex;
gap: 12px;
}
gap はFlexboxでも使えます。現在の主要ブラウザでは一般的に利用できるため、通常のWeb制作では実務向けの選択肢になります。古いブラウザを厳密に対象にする案件では、対応状況を確認してください。
中央寄せは「横」と「縦」を分けて考える
Flexboxの中央寄せでつまずきやすい原因は、justify-content と align-items の役割を混同することです。
初期状態のFlexboxでは、子要素は横方向に並びます。このとき、横方向の位置は justify-content、縦方向の位置は align-items で調整します。
横方向に中央寄せする
.hero-actions {
display: flex;
justify-content: center;
gap: 12px;
}
これは、ボタン群全体を親要素の横中央に置く指定です。
縦方向にも中央寄せする
親要素に高さがある場合は、align-items: center; で縦方向の中央にそろえます。
<div class="notice">
<span>公開ステータス</span>
<strong>下書き</strong>
</div>
.notice {
display: flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 0 16px;
border: 1px solid #ddd;
}
この指定では、span と strong が横に並び、文字の高さが違っても縦位置が中央でそろいます。
完全中央寄せの最小例
要素を上下左右の中央に置きたいときは、次の形がよく使われます。
<div class="center-box">
<p>中央に置きたいテキスト</p>
</div>
.center-box {
display: flex;
justify-content: center;
align-items: center;
min-height: 240px;
border: 1px solid #ddd;
}
この例で重要なのは、親要素に min-height があることです。高さがない箱の中では、縦方向の中央寄せをしても見た目の変化が分かりません。
余白調整は gap と justify-content を使い分ける
Flexboxの余白調整は、「要素同士の間隔」なのか「余ったスペースの配分」なのかで使うプロパティが変わります。
ここを分けると、CSSがかなり読みやすくなります。
要素同士の間隔は gap
カード、ボタン、タグ、メニュー項目の間隔を一定にしたいなら gap が向いています。
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
padding: 4px 10px;
border: 1px solid #ccc;
border-radius: 999px;
}
flex-wrap: wrap; を入れると、横幅が足りないときに折り返します。タグ一覧やカテゴリリンクのように数が増減するUIでは、折り返しを前提にしたほうが実務では安定します。
余ったスペースの配分は justify-content
ナビゲーションのように、親要素の幅いっぱいを使って配置したい場合は justify-content を使います。
.header-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
space-between は、最初の要素を左端、最後の要素を右端に寄せ、その間の余白を均等に分配します。
よく使う値は次の通りです。
flex-start：先頭に寄せるcenter：中央に寄せるspace-between：両端に寄せて間を空けるspace-around：各要素の周囲に余白を作るspace-evenly：要素間と両端の余白を均等にする
gap と space-between の違い
似て見えますが、目的が違います。
| 指定 | 向いている場面 | 考え方 |
|---|---|---|
gap |
ボタン、タグ、カードの間隔を一定にしたい | 要素同士の距離を固定する |
justify-content: space-between; |
左端と右端に分けて配置したい | 親要素に残った空間を配分する |
justify-content: center; |
ボタン群やメニュー全体を中央に置きたい | まとまり全体の位置を動かす |
実務では、まず gap で要素同士の距離を決め、そのうえで必要なら justify-content でまとまり全体の位置を決める、という順で考えると整理しやすくなります。
カード一覧は flex-wrap と幅指定をセットで使う
カードを横並びにするときは、折り返しとカード幅を一緒に考える必要があります。
たとえば、3枚のカードを横に並べたい場合でも、スマホ幅では1列にしたいことが多いはずです。Flexboxでは、flex-wrap と flex を組み合わせると、最低幅を保ちながら自然に折り返せます。
入力例：記事カードを並べる
<div class="card-list">
<article class="card">
<h2>CSSの基本</h2>
<p>セレクタとプロパティの考え方を整理します。</p>
</article>
<article class="card">
<h2>Flexbox入門</h2>
<p>横並びと中央寄せを実務例で確認します。</p>
</article>
<article class="card">
<h2>余白設計</h2>
<p>margin、padding、gapの使い分けを扱います。</p>
</article>
</div>
.card-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
flex: 1 1 240px;
padding: 16px;
border: 1px solid #ddd;
}
出力イメージ
- 横幅に余裕があるときはカードが横に並ぶ
- 幅が狭くなると、カードが次の行に折り返す
- 各カードは最低240px程度を目安に幅を保つ
flex: 1 1 240px; は、次の3つをまとめた指定です。
flex-grow: 1;：余ったスペースがあれば広がるflex-shrink: 1;：必要に応じて縮むflex-basis: 240px;：基本の幅を240pxにする
この書き方は便利ですが、最初は難しく見えます。初心者のうちは「カードの基本幅を決めつつ、余った幅に合わせて伸び縮みさせる指定」と理解しておけば十分です。
よくある失敗と直し方
Flexboxで崩れるときは、原因がいくつかに絞れます。焦ってプロパティを足す前に、親要素、子要素、幅、高さの順に確認します。
1. display: flex を子要素に書いている
横並びにならないときは、まず指定場所を確認します。
/* NG: 並べたい子要素に指定している */
.menu a {
display: flex;
}
/* OK: 並べたい要素を包む親に指定する */
.menu {
display: flex;
}
子要素に display: flex; を指定すると、その子要素の中身をFlexboxで扱う指定になります。兄弟要素同士を並べたいなら、親要素に指定します。
2. 中央寄せしたいのに親の高さがない
縦中央に来ない場合、親要素に高さがないことがあります。
.box {
display: flex;
align-items: center;
}
この指定だけでは、親の高さが中身と同じなら中央寄せの効果が見えません。
.box {
display: flex;
align-items: center;
min-height: 200px;
}
縦方向の中央寄せを確認したい場合は、height または min-height が必要かを見ます。
3. 余白を margin と gap で二重に作っている
gap を使っているのに、子要素側にも margin が残っていると、想定より広い余白になります。
.card-list {
display: flex;
gap: 24px;
}
.card {
margin-right: 24px;
}
このような指定は、後から見たときに原因を追いにくくなります。要素間の余白を gap に寄せるなら、子要素側の横 margin は削る方向で整理します。
4. 折り返したいのに flex-wrap がない
Flexboxの初期状態では、子要素は1行に並ぼうとします。カードが横にはみ出す場合は、折り返しを許可します。
.card-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
カードやタグのように数が増えるUIでは、flex-wrap: wrap; を早めに入れておくと、画面幅が変わったときの崩れを抑えやすくなります。
FlexboxとGridはどう使い分けるか
横並びや中央寄せはFlexbox、行と列をそろえる大きなレイアウトはGrid、という分け方から始めると判断しやすくなります。
CSSにはFlexboxのほかにCSS Gridがあります。どちらもレイアウト機能ですが、得意な場面が違います。
- Flexbox：1方向の並びに強い
- Grid：行と列を持つ2方向の配置に強い
たとえば、ボタンを横に並べる、ヘッダーのロゴとメニューを左右に分ける、カードを自然に折り返す、といった場面ではFlexboxが扱いやすいです。
一方で、ページ全体を「左サイドバー、メイン、右サイドバー」のように分ける場合や、縦横のマス目を明確にそろえたい場合はGridも候補になります。
判断の目安
| やりたいこと | まず検討する方法 | 理由 |
|---|---|---|
| ボタンを横並びにする | Flexbox | 1方向の並びなので指定が少ない |
| 要素を上下左右の中央に置く | Flexbox | justify-content と align-items で扱いやすい |
| カードを折り返して並べる | FlexboxまたはGrid | 自然な折り返しならFlexbox、列数管理ならGrid |
| ページ全体を行と列で設計する | Grid | 2方向の配置を明確に管理できる |
どちらか一方だけを覚える必要はありません。実務では、ヘッダー内の小さな並びにFlexbox、ページ全体や一覧グリッドにGrid、というように同じページ内で併用します。
WordPressで使うときの確認ポイント
WordPressでは、テーマやブロックエディターが既にCSSを持っているため、自分のFlexbox指定が別のCSSとぶつかることがあります。
特に確認したいのは次の点です。
- テーマ側で同じクラス名が使われていないか
- ブロックエディターの余白設定とCSSの
gapが重複していないか - スマホ幅で折り返す指定が入っているか
- 親要素の幅が想定より狭くなっていないか
align-items: stretch;の初期値でカードの高さがそろっていないか
WordPressの追加CSSや子テーマで調整する場合は、対象範囲を絞ったクラス名を使うと管理しやすくなります。
.wp-block-group.profile-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
このように、既存のブロッククラスと自分で付けたクラスを組み合わせると、他のパーツへ影響しにくくなります。
実務での最小チェックリスト
Flexboxでレイアウトを作るときは、次の順で確認すると迷いにくくなります。
- 並べたい要素を包む親に
display: flex;を指定したか - 横並びか縦並びかを
flex-directionで確認したか - 要素間の余白は
gapで表現できるか - 位置調整は
justify-contentとalign-itemsのどちらか - 折り返しが必要なら
flex-wrap: wrap;を入れたか - カードやボタンの幅が小さくなりすぎないか
- WordPressやテーマ側のCSSと余白が重複していないか
Flexboxは、すべてのレイアウトを一発で解決する道具ではありません。ただ、横並び、中央寄せ、余白調整という日常的なCSSの悩みにはかなり強い機能です。
次に見るべきポイントは、gap と flex-wrap を入れたあとに、スマホ幅でどう折り返すかです。そこで無理に1行へ詰め込むと、文字が潰れたりボタンが押しにくくなったりします。横並びを作ったら、最後に幅を狭めて確認するところまでをセットにしてください。