本文へスキップ
BecomeCoder
ブログ一覧Wikiコース一覧

CSSで横並びにする方法｜Flexboxの使い方と中央寄せができない理由

#CSS#Flexbox#レイアウト#HTML#初心者

結論：横並びにしたい要素の「親」に display: flex を1行書けば、子は横一列に並びます。中央寄せは横方向が justify-content: center、縦方向が align-items: center で、この2つを取り違えているのが「中央寄せできない」のほぼ全部です。

CSSのレイアウトは、float や display: inline-block を使っていた時代の情報がまだ大量に残っているせいで、初心者ほど遠回りしがちです。いまは横並びも中央寄せも、Flexboxだけでほぼ片が付きます。この記事は「学ぶ順番」ではなく「具体的なやり方」に絞ってまとめます。

なぜ横並びが難しく感じるのか

そもそもHTMLの要素は、最初から2種類の性質に分かれています。

「箱を3つ横に並べたい」と思って <div> を3つ書くと縦に積まれるのは、<div> がブロック要素だからです。ここで悩む必要はありません。この性質は display プロパティで変えられます。実際の挙動は display ― 並び方を変える で <span> を block に変えたり戻したりしながら確認できます。<div> と <span> の違いそのものは divとspan ― 汎用の箱 が入口です。

昔は「ブロック要素を無理やり横に並べる」ために float や inline-block を使っていました。回り込みの解除や隙間の調整といった副作用が多く、初心者が最初に触るものではありません。横並びが目的なら、いまはFlexbox一択と考えて構いません。

display: flex は「親」に書く

Flexboxの最大のポイントは、並べたい子ではなく、子を囲んでいる親に指定することです。

<div class="row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<style>
  .row {
    display: flex;
    gap: 12px;
  }
</style>

.row が親、その中の <div> 3つが子です。親に display: flex を付けた瞬間、子は横一列に並びます。子側には何も書きません。

うまくいかないときの原因は、だいたいこの3つです。

  1. 子のほうに display: flex を書いている（.row div { display: flex } にしてしまう）
  2. 並べたい要素を囲む親がそもそも無い（<div> を3つ並べただけで、外側の箱を作っていない）
  3. セレクタが要素に当たっていない（class="row" と .row の対応がずれている）

3つ目は Flexbox 以前の話で、. と # の意味を確認すると解決します。classとidで印を付ける と セレクタ ― classとidで狙う がその範囲です。

この横並びは Flexboxで横に並べる でブラウザ上にそのまま書いて、隣のプレビューで結果を見ながら試せます。エディタの内容を書き換えれば即座に反映されるので、この記事のコードを貼り付けて数字をいじるだけでも感覚がつかめます。

主軸と交差軸 ― これが分かれば中央寄せは迷わない

Flexboxには2本の軸があります。ここを言葉で覚えておくと、以降のプロパティを丸暗記しなくて済みます。

そして、配置を決めるプロパティは軸ごとに分かれています。

やりたいことプロパティ既定の向き
並んでいる方向の位置を決めるjustify-content横方向
直角方向の位置を決めるalign-items縦方向

つまり justify-content は横、align-items は縦（既定の状態では、という条件付き）。「中央寄せできない」と検索している人の多くは、縦に寄せたいのに justify-content: center を書いています。

justify-content に指定できる代表的な値は次のとおりです。

align-items の代表は次のとおりです。

justify-content: center と space-between の違いは、Flexboxの回 のエディタで値を書き換えるとその場で見比べられます。

上下中央寄せの決まり文句

「文字を箱の真ん中に置きたい」は次の3行です。

<div class="center-box">まんなか</div>

<style>
  .center-box {
    display: flex;
    justify-content: center;  /* 横方向の中央 */
    align-items: center;      /* 縦方向の中央 */
    height: 200px;
    border: 1px solid gray;
  }
</style>

ここで見落としがちなのが height です。親の高さが中身ぶんしか無ければ、縦方向に動かせる余白が存在せず、align-items: center を書いても見た目は変わりません。「縦中央にならない」ときは、まず親に高さがあるかを疑ってください。画面いっぱいに縦中央を取りたい場合は height: 100vh（表示領域の高さ）を使います。

なお、この例の border のように枠線や余白を扱うときは、padding（内側の余白）・border（枠線）・margin（外側の余白）の3層構造を押さえておくと調整が速くなります。これは ボックスモデル ― 余白と枠線 の内容で、こちらもブラウザ上で数値を変えながら確認できる回です。

余白の付け方の定石は gap

子どうしの間隔は、子に margin-right を付けて回るのではなく、親に gap を1行書くのが定石です。

.row {
  display: flex;
  gap: 16px;
}

margin 方式だと「最後の要素にだけ余白が余る」問題が起きて、:last-child で打ち消す小細工が必要になります。gap は要素と要素の“あいだ”にだけ効くので、その手間がありません。縦横で違う値にしたいときは gap: 8px 16px（行方向 列方向の順）と書けます。

よく使う組み合わせも覚えておくと早いです。

/* ヘッダー：ロゴは左、メニューは右 */
.header { display: flex; justify-content: space-between; align-items: center; }

/* 縦に積む（主軸を縦にする） */
.stack { display: flex; flex-direction: column; gap: 12px; }

/* 画面が狭いとき、はみ出さずに折り返す */
.cards { display: flex; flex-wrap: wrap; gap: 16px; }

flex-direction: column にすると主軸が縦になるので、justify-content と align-items の担当する向きが入れ替わります。「縦積みにしたら中央寄せの指定が効かなくなった」ときは、たいていこれが原因です。軸で覚えていれば、値をひっくり返すだけで解決します。

flex-wrap: wrap は、子が親の幅に収まらないときに折り返す指定です。カード型の一覧を作るときの必需品で、これだけでも小さい画面である程度形が保たれます。本格的に画面幅で切り替えたいなら、メディアクエリを使います。入り口は レスポンシブの入り口 で、プレビュー幅を変えると切り替わりを実際に目で見られる回です。用語としての整理は レスポンシブデザイン にあります。

つまずきやすいところ

子の幅がバラバラになる／伸びすぎる。 Flexの子は、余った幅の分配ルールを持っています。均等に伸ばしたければ子に flex: 1 を付けます。逆に「この要素だけ縮ませたくない」ときは flex-shrink: 0 です。長いテキストが入ると勝手に縮む、という現象はこれで説明できます。

画像が親からはみ出す。 画像には元のサイズがあるため、max-width: 100% を付けておくのが定番です。画像の扱いそのものは 画像を表示する にあります。

CSSが効かない。 Flexbox以前に、そもそも指定が届いていないケースがあります。セレクタのつづり、{ } の閉じ忘れ、; の付け忘れ。CSSはエラーで止まらず「その行だけ黙って無視される」ので、書き間違いに気づきにくい言語です。効かないときは、いったん background: pink のような露骨な指定を足して、そもそも当たっているかを確かめると切り分けが速くなります。CSSの基本の書き方は CSSで見た目を変える に戻れば確認できます。

Flexboxで全部やろうとする。 横一列・縦一列の配置はFlexboxが得意ですが、「行と列の両方をきっちり揃えた格子」はCSS Gridのほうが素直です。まずはFlexboxを手に馴染ませて、必要になったらGridを足す順番で問題ありません。

手を動かして覚えるのがいちばん早い

CSSのレイアウトは、読んだだけでは身につきません。値を変えて、崩れて、直す、という往復が理解を作ります。当サイトの HTML/CSSコース は、書いたHTMLとCSSがその場でプレビューに反映される形式で、インストールも登録も不要・無料で開いてすぐ試せます。

レイアウトに関係する回はこの並びです。

  1. CSSで見た目を変える — セレクタとプロパティの書き方
  2. divとspan ― 汎用の箱 — 囲むための箱を用意する
  3. classとidで印を付ける — 狙うための印
  4. セレクタ ― classとidで狙う — . と # の使い分け
  5. ボックスモデル ― 余白と枠線 — padding / border / margin
  6. display ― 並び方を変える — ブロックとインライン
  7. Flexboxで横に並べる — display: flex と gap・justify-content
  8. レスポンシブの入り口 — メディアクエリ

7の回のエディタに、この記事の align-items や flex-direction: column を書き足して結果を見比べると、軸の感覚が一気に固まります。

次に読む

← ブログ一覧に戻る