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行へ詰め込むと、文字が潰れたりボタンが押しにくくなったりします。横並びを作ったら、最後に幅を狭めて確認するところまでをセットにしてください。

参照リンク

• MDN Web Docs: Flexbox の基本概念
• MDN Web Docs: display
• MDN Web Docs: gap
• MDN Web Docs: justify-content
• MDN Web Docs: align-items
• MDN Web Docs: flex-wrap
• MDN Web Docs: flex