CSSのFlexboxとは？display: flex・justify-content・align-itemsの使い方を初心者向けに解説

複数の要素を横並びにしたいとき、「どの要素に display: flex を書くの？」「justify-content と align-items は何が違うの？」と迷う方は多いのではないでしょうか。

Flexboxは、プロパティの値を丸暗記するよりも、親要素と子要素の関係、そして「主軸」と「交差軸」を理解することが近道です。

この記事は、HTMLのタグとCSSの基本的な書き方を学び、次に要素の配置を整えたい方に向けた解説です。手元のHTMLファイルで試せる例から始め、横並び、中央揃え、間隔、折り返しを順に確認します。読み終えたら、親要素・軸・余白を手がかりに、配置が変わらない原因を絞り込めます。

CSSのFlexboxとは

Flexbox（Flexible Box Layout）は、要素を行または列の一方向に並べ、配置や間隔を整えるCSSのレイアウト方法です。ナビゲーション、ボタンの並び、カード一覧など、複数の要素を同じ方向へ並べる場面に向いています。

Flexboxは、行か列のどちらか一方向を基準に要素を並べる仕組みです。このため「一次元レイアウト」と呼ばれます。行と列を同時に設計したい場合は、CSS Gridが向いています。

MDNの「フレックスボックスの基本概念」でも、Flexboxはアイテム間の余白を分配する一次元レイアウトモデルとして説明されています。

親要素と直接の子要素で役割が分かれる

Flexboxでは、display: flex を指定した親要素を「フレックスコンテナー」、その直接の子要素を「フレックスアイテム」と呼びます。

<div class="flex-box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

この例では、.flex-box が親要素です。3つの .item は .flex-box の直接の子要素なので、display: flex を有効にするとフレックスアイテムになります。

孫要素まですべてが自動的にフレックスアイテムになるわけではありません。配置したい要素の一つ上にある親要素を確認することが大切です。

主軸と交差軸を基準に考える

Flexboxには「主軸」と「交差軸」という2つの向きがあります。主軸はアイテムが並ぶ方向、交差軸は主軸と直角に交わる方向です。

flex-direction の既定値は row です。日本語の一般的な横書きでは、アイテムが横方向へ並ぶため、主軸は横方向、交差軸は縦方向になります。

flex-direction: column に変更すると、主軸は縦方向、交差軸は横方向へ入れ替わります。「横はjustify、縦はalign」と覚えるのではなく、どちらが主軸かを先に確認すると混乱しません。

display: flexで横並びを作る

まずは、1つのHTMLファイルで横並びを確認しましょう。

以下が貼り付けるコード全体です。CSSは <head> 内の <style> に、表示する要素は <body> に書いています。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flexboxの練習</title>
  <style>
    .flex-box {
      display: flex;
    }

    .item {
      box-sizing: border-box;
      padding: 16px;
      border: 1px solid #536048;
    }
  </style>
</head>
<body>
  <div class="flex-box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

display: flex は、並べたい要素そのものではなく、その親要素に指定します。この1行で、直接の子要素である3つの .item が横並びになります。

以降の各CSS例では、このファイルの .flex-box { ... } 全体を例の内容に置き換えます。.item の共通設定は残し、例に .item の指定があればその中へ追加してください。変更のたびに保存してブラウザーを再読み込みすると、どの指定で見た目が変わるかを確かめられます。

CSSをどこへ書くか迷った場合は、セレクター・プロパティ・値の基本を先に確認すると整理しやすくなります。また、display の値そのものを復習したい場合は、block・inline・inline-blockの違いも確認してみてください。

display: flexだけを指定したときの初期状態

display: flex だけを指定すると、主に次の初期動作になります。

• flex-direction: row：主軸方向へ一行に並ぶ
• justify-content: normal：初期値。Flexboxでは通常、flex-start と同じように主軸の始点側へ並ぶ
• align-items: normal：初期値。Flexboxでは通常 stretch として働き、交差軸方向のサイズが auto のアイテムを伸ばす
• flex-wrap: nowrap：複数行に折り返さない

この初期状態を知っていると、「何も指定していないのに高さがそろった」「幅が足りないのに折り返さない」といった表示も理由を説明できます。

justify-contentで主軸方向を揃える

justify-content は、フレックスアイテムを主軸方向にどう配置するかを指定するプロパティです。既定の flex-direction: row では主軸が横方向なので、左右方向の配置を変えるように見えます。

.flex-box {
  display: flex;
  justify-content: center;
}

この例では、3つのアイテムが親要素の主軸方向の中央にまとまります。

値	動き	向く場面
flex-start	主軸の始点側に集める	基本の配置
center	主軸の中央に集める	中央寄せ
flex-end	主軸の終点側に集める	終点寄せ
space-between	両端をそろえ、間を均等にする	ナビゲーション
space-around	各アイテムの周囲に余白を配る	周囲にも余白が必要
space-evenly	端を含む間隔をすべて均等にする	均等な間隔

最初は flex-start、center、flex-end、space-between の4つを試せば、主な違いをつかめます。端を含むすべての間隔を均等にしたいときは space-evenly が便利です。

余白がなければ配置の差は見えにくい

justify-content は、アイテムを並べたあとに親要素内へ残る空きスペースを、主軸方向のどこに配るか決めます。空きスペースがなければ、値を変えても見た目はほとんど変わりません。

justify-content が効かないように見えたら、row なら親要素の幅、column なら高さを見て、アイテムを置いた後に主軸方向の余白が残っているかを確認してください。子要素が flex-grow などで余白を使い切っている場合も、配置の差は出にくくなります。詳しい値はMDNの「justify-content」で確認できます。

align-itemsで交差軸方向を揃える

align-items は、フレックスアイテムを交差軸方向にどう配置するかを指定するプロパティです。既定の flex-direction: row では交差軸が縦方向なので、上下方向の配置を変えるように見えます。

.flex-box {
  display: flex;
  align-items: center;
  min-height: 180px;
}

この例では、親要素に180pxの最小高さがあるため、アイテムが交差軸方向の中央に配置されたことを確認できます。次の表の「向く場面」は、一般的な横書きで flex-direction: row の場合です。

値	動き	向く場面
stretch	交差軸方向へ伸ばす	高さをそろえる
flex-start	交差軸の始点側にそろえる	上端寄せ
center	交差軸の中央にそろえる	上下中央
flex-end	交差軸の終点側にそろえる	下端寄せ
baseline	文字の基準線をそろえる	文字サイズが違う項目

align-items の初期値は normal で、Flexboxでは通常 stretch として働きます。row では高さ、column では幅が auto のアイテムが、同じ行の交差軸方向へ伸びます。子要素にその方向のサイズを明示すると伸びず、min-・max- のサイズ指定にも制限されます。

交差軸方向の余白を用意して確認する

row で親要素の高さが内容と同じ程度しかないと、align-items: center を指定しても上下に動く余白がありません。違いを確認するときは、例のように親要素へ min-height を設定します。column の交差軸は横方向なので、確認するのは親と子の幅です。

ただし、実際のページで高さを固定すると、文章が増えたときにはみ出すことがあります。内容量が変わる箱には min-height を使うなど、幅と高さの記事も参考にして調整してください。詳しい配置の仕組みは、MDNの「フレックスコンテナー内のアイテムの配置」と「align-items」で確認できます。

gapとflex-wrapで間隔・折り返しを整える

横並びにした後は、アイテム間の余白と、画面が狭いときの折り返しを整えます。

gapでアイテム間に余白を付ける

gap は、フレックスアイテム同士の間隔を指定します。

.flex-box {
  display: flex;
  gap: 16px;
}

各アイテムに margin を付ける方法と違い、外側には余分な間隔を作らず、アイテム同士の間だけをまとめて調整できます。1rem はルート要素（html）の文字サイズを基準にした単位で、常に 16px と同じ大きさになるわけではありません。単位の違いに迷った場合は、px・%・em・remの使い分けを確認してください。詳しい仕様はMDNの「gap」にまとまっています。

flex-wrap: wrapで複数行に折り返す

Flexboxは初期状態では一行に並び、複数行へ折り返しません。画面幅が狭いときに折り返したい場合は、親要素に flex-wrap: wrap を加えます。

幅が足りないとき、子要素は flex-shrink の初期値 1 により縮もうとします。width を指定しただけで、その幅が必ず保たれるわけではありません。次の例では、共通設定の box-sizing: border-box を残し、min-width: 160px を加えて、枠線を含む最小幅を決めています。

.flex-box {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.item {
  min-width: 160px;
}

アイテムを一行に置けなくなると、次の行へ移動します。この練習例では、3個を横一列に置くために、親の内側に少なくとも 512px（160px × 3個 ＋ 16px × 2か所） が必要です。ブラウザーを狭くし、親の内側の幅が512px未満になると3個目が次の行へ移ります。さらに狭くすると1行に置ける個数も減ります。幅を戻して横一列に戻れば、折り返しを確認できています。MDNの「flex-wrap」では、初期値が nowrap であることと、wrap の動作を確認できます。

実践例：メニューを中央に並べる

ここまでのプロパティを組み合わせて、画面が狭いときは折り返すメニューを作ります。練習用ファイルの <body> 内を次のHTMLへ、<style> 内を後のCSSへ置き換えてください。

<ul class="menu">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">サービス</a></li>
  <li><a href="#">お問い合わせ</a></li>
</ul>

href="#" は表示確認用の例です。本番では、移動先の実際のURLへ置き換えてください。

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  display: inline-block;
  padding: 0.75rem 1rem;
  color: #3d433b;
  text-decoration: none;
  border: 1px solid #7a8e6d;
  border-radius: 8px;
}

.menu がフレックスコンテナーで、直接の子である3つの li がフレックスアイテムです。justify-content: center で主軸方向の中央に寄せ、align-items: center で交差軸方向をそろえ、gap で間隔を付けています。

保存してブラウザーを再読み込みし、3項目が中央に並び、項目間に間隔があることを確認します。次にウィンドウを狭くして、入りきらない項目が次の行へ移れば、この練習は完了です。横幅や内側の余白にはボックスモデルも関係するため、想定より大きくなる場合はcontent・padding・border・marginの内訳を確認してください。

Flexboxが効かないときの確認順

まず、編集したファイルを保存し、表示中の同じファイルをブラウザーで再読み込みします。そのうえで、次の4点を確認してください。

1. 並べたい要素の親に display: flex が指定されているか
2. 並べたい要素はフレックスコンテナーの直接の子か
3. justify-content と align-items を親要素に指定しているか
4. flex-direction により主軸と交差軸がどちらを向いているか

4点に問題がなければ、次から自分の症状に合う項目だけを確認します。

• 中央寄せや均等配置が変わらない：「justify-contentで主軸方向を揃える」の例に戻り、親に空きが残っているか確認します。row は幅、column は高さが対象です。center で中央へ移れば確認完了です。
• 交差軸方向の位置が変わらない：「align-itemsで交差軸方向を揃える」の例に戻ります。row なら親の min-height: 180px と align-items: center を確認し、上下中央へ移るか見てください。column では幅の余裕を確認します。
• 狭くしても折り返さない：「flex-wrap: wrapで複数行に折り返す」の例に戻り、親の flex-wrap: wrap、子の min-width: 160px、親の gap: 16px を確認します。親の内側を512px未満にしたとき、3個が複数行に分かれれば確認完了です。

justify-items はFlexboxでは配置に影響しません。フレックスアイテム全体を主軸方向へ動かすときは、justify-content を使用します。

よくある質問

一つの子要素だけ揃え方を変えられますか？

変えたいフレックスアイテムに align-self を指定します。例えば、その子だけ align-self: flex-end にすると、交差軸の終点側へ寄せられます。これは子要素に書く指定で、親に書く align-items よりそのアイテムで優先されます。

折り返した複数行の間隔はalign-itemsで調整しますか？

各行の中で子要素を揃えるのは align-items、複数行のまとまりを交差軸方向へ配置するのは align-content です。この記事のように flex-direction: row で折り返した行の間隔を一定にしたいなら、row-gap を使います。column で折り返した列同士の間隔には column-gap を使うため、軸の向きを先に確認してください。align-content: center などの差を見るには、flex-wrap: wrap と、行を置いた後に残る交差軸方向の空きが必要です。

画像にwidthを指定したのに縮むのはなぜですか？

フレックスアイテムは、主軸方向のスペースが足りないと flex-shrink によって縮むことがあります。画像自体がアイテムなのか、画像を包む親がアイテムなのかで確認対象が変わります。詳しくはFlexboxで画像が縮む原因と直し方を確認してください。

まとめ

Flexboxは、親要素に display: flex を指定し、直接の子要素を主軸に沿って並べるレイアウト方法です。

• justify-content は主軸方向の配置を整える
• align-items は交差軸方向の配置を整える
• flex-direction を変えると主軸と交差軸の向きも変わる
• gap で間隔を付け、flex-wrap: wrap で複数行に折り返す
• 効かないときは、親要素、直接の子要素、軸、余白の順に確認する

まずは練習用ファイルで center や space-between を切り替え、どの軸で何が動くかを確かめてみてください。メニューを中央に並べ、画面を狭くしたときの折り返しまで確認できたら、この記事の練習は完了です。期待どおりに変わらない部分だけ、症状別の確認へ戻りましょう。