CSS Flexboxの使い方｜主軸・揃え方・伸縮と折り返しを理解する

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

CSS Flexboxを使うと、カードやメニューを横へ並べたり、余った空間を分けたりできます。ただ、見つけた指定を足しているうちに「中央にならない」「幅が縮まない」「最後の一枚だけ広がる」と迷いやすいところでもあります。まず親と直接の子、主軸と交差軸を分けて考えると、調べる順序が見えてきます。

この記事では、基本の三つの要素から始め、揃え方、伸縮、折り返すカード、崩れたときの確認へ進みます。HTMLの要素とclass、CSSのセレクターと宣言を少し学んだ方向けです。プロパティ一覧を暗記するより、「何を並べ、どの方向の、どの余白を調整したいか」を言葉にしながら練習しましょう。

2026年10月3日にMDNの資料を確認しました。コードは本記事用の学習例です。最終的な表示は、ほかのCSS、ブラウザー、文字、画面幅によって変わるため、自分の練習環境で確かめてください。図版は概念を説明する生成イメージで、コードの実行画面や特定端末での表示保証を示すものではありません。

Flexboxの基本｜親と子・主軸と交差軸を理解する

display:flexを付けるのは並べたい要素の親

Flexboxでは、並べる範囲となる親をフレックスコンテナー、その直接の子をフレックスアイテムと呼びます。親にdisplay:flexを設定すると、その直接の子がFlexboxの配置対象になります。見た目が近くにあるものすべてへ、自動で同じ配置が広がるわけではありません。

下のHTMLでは、demoというclassのdivが親で、三つのpが直接の子です。まず、この関係をレイヤー図のように紙へ書いてみてください。pの中にさらに文字を囲むspanがあっても、そのspanはdemoの直接の子ではないため、同じ階層のアイテムとしては扱われません。

<div class="demo">
  <p>学ぶ</p>
  <p>作る</p>
  <p>確かめる</p>
</div>

次のCSSを組み合わせます。display:flexで並び方を指定し、gapでアイテム間の間隔を作っています。pに付けた背景と内側の余白は、配置対象を見分けるための装飾です。学習時には、配置の指定と見た目の指定を分けて読むと理解しやすくなります。

.demo {
  display: flex;
  gap: 16px;
}
.demo > p {
  margin: 0;
  padding: 16px;
  background: #e2f0ed;
}

最初の状態で何が起きるかを見る

この例では、一般的な横書き・左から右へ読む文書を前提に、三つのpが横方向へ並びます。初期状態では勝手に複数行へ折り返さず、使える空間が足りなければ縮む方向へ働きます。ただし、内容や最小サイズの制約によっては、はみ出すこともあります。

「flexを付けたら必ず均等幅になる」という理解は正確ではありません。初期値では、余った主軸方向の空間を埋めるために自動で同じ幅へ伸びるわけではないためです。文字数の違うpを並べると、内容に応じた違いを観察できます。

全体像は、MDNのフレックスボックスの基本概念で確認できます。最初の練習では、指定を増やさず、display:flexを外した場合と付けた場合の差を見てください。何が変わったかを説明できれば、次の指定を追加する意味も分かりやすくなります。

主軸はflex-directionで決まる

主軸は、アイテムを並べる中心の方向です。flex-directionがrowなら行の方向、columnなら列の方向で考えます。交差軸は主軸と直交する方向です。横書きの通常の例ではrowの主軸は横ですが、常に「主軸イコール横」と覚えると、columnへ変えたときに混乱します。

先ほどのdemoへflex-direction:columnを追加すると、アイテムは縦方向へ並びます。このとき、主軸も縦方向へ変わります。後で使うjustify-contentがどの方向へ効くかも変わるため、プロパティを見る前にdirectionを確認する癖を付けましょう。

row-reverseやcolumn-reverseのように、並びの向きを変える値もあります。ただし、見た目の順序とHTMLの意味の順序がずれることがあるため、レイアウトを合わせるためだけに安易に使わないでください。順序の注意点は最後の章で整理します。

※表は横にスクロールできます。

Flexboxが得意な配置を選ぶ

Flexboxは、行または列の一方向を中心に並びと空間配分を考えるのに向いています。ナビゲーション、横並びの操作群、カード内部の縦の構成などが練習題材になります。複雑なページ全体へ最初から適用するより、小さなまとまりで試す方が原因を見つけやすくなります。

行と列を同時にそろえたい一覧では、CSS Gridが考えやすい場合もあります。Flexboxでも折り返せますが、各行の配分が独立するため、すべての列が常に同じ位置へそろうとは限りません。できるかどうかだけでなく、どの関係を管理したいかで選びます。

練習のゴールは、どんな配置もFlexboxで押し切ることではありません。並びの中心方向、内容の変化、折り返した後の揃い方を考え、向いている範囲で使えるようになることです。別の手法を選ぶ理由が説明できることも、理解の一部になります。

揃え方と余白を調整｜方向が変わったときの見方

justify-contentは主軸方向の空間を扱う

justify-contentは、主軸方向の配置や余白の分配を考えるときに使います。centerなら中央へ寄せる、space-betweenなら先頭と末尾を両端側へ置いて間を分ける、といった指定があります。ただし、分配する空間がほとんどなければ、指定しても見た目の差が小さくなります。

たとえば、子が親の横幅を使い切っている状態で中央寄せしても、動く余地がありません。中央にならないときは、指定名を疑う前に、親の大きさと子の合計の大きさを見ます。親が子とほぼ同じ幅なら、中央寄せを観察できる空間を用意する必要があります。

また、子がflex-growで余白を受け取って伸びている場合も、justify-contentへ回る余白が残らないことがあります。「効いていない」のではなく、別の仕組みで空間が使われている可能性を考えましょう。

align-itemsは交差軸方向の揃え方を見る

align-itemsは、交差軸方向でアイテムをどう揃えるかを考える指定です。横並びの例で高さを中央へそろえたいなら、交差軸が縦方向であることを確認して使います。columnへ変えると交差軸は横へ変わるため、同じ指定でも見える動きが変わります。

下のCSSは、先ほどのdemoのルールを置き換える例です。min-heightを設けることで、縦方向の空間も確認しやすくしています。既存の同じセレクターへ闇雲に追記するのではなく、どのルールが最終的に有効か分かる状態で試してください。

.demo {
  display: flex;
  min-height: 160px;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

ここからflex-direction:columnへ変え、主軸と交差軸を書き出して結果を予想します。予想と違った場合は、親の高さや子の幅など、揃えるための空間がどこにあるかを見ます。プロパティ名だけで横・縦を暗記しないための練習です。

stretch・align-self・align-contentを分ける

初期のalign-items:stretchは、条件が合えば交差軸方向へアイテムを伸ばします。ただし、アイテムに明示的な交差軸方向のサイズがある場合など、常に同じように伸びるわけではありません。高さがそろう理由を理解せずに固定値を足すと、後で内容が増えた際に困ることがあります。

一つのアイテムだけ揃え方を変えたい場合は、align-selfを検討できます。親全体を変えるのか、特定の子だけを変えるのかを先に決めます。子へ付ける指定なのに親へ書く、または逆に書くと、期待する変化が起こりません。

align-contentは、複数行の行全体を交差軸方向で配置する場面に関係します。一行だけの配置や、交差軸方向に余白のない状態では、想定した差が出ないことがあります。詳しい関係は、MDNのフレックスコンテナー内の配置で確認できます。

※表は横にスクロールできます。

gapと分配された余白は同じではない

gapはアイテムや行の間に設ける間隔です。space-betweenなどの空間分配と組み合わせると、見た目の間隔にはgap以外の余白も含まれることがあります。「gapを16pxにしたのに間がもっと広い」と感じたら、justify-contentの指定も確認してください。

外側の余白が必要なら、親のpaddingや配置先との関係も考えます。gapを指定しただけで、先頭・末尾の外側へ同じ余白が自動的にできるわけではありません。アイテム間とコンテナーの内側の余白を別の目的で扱うと、数値を整理しやすくなります。

marginを併用するときも、どの間隔をどの指定が担当しているかを明確にします。すべての子に左右marginを付け、さらにgapも付けると、意図より広い間隔になる場合があります。まず一つの方法で関係を確認し、必要な役割だけを追加しましょう。

自動マージンで一部を離す場合

一つの項目を反対側へ寄せたいときには、自動マージンを使う方法があります。たとえば横並びのヘッダーで、一部の操作を主な項目から離す場面です。ただし、余白が足りないときの動きも考え、狭い画面で何を折り返すかを合わせて決めます。

自動マージンを使った後でjustify-contentの変化が分かりにくくなった場合は、余白をどちらが受け取っているかを確認します。見た目を合わせるために複数の方法を重ねるより、ひとつの目的をひとつの仕組みで説明できる構成が学習には向いています。

実務のコードを見ると、同じ中央配置でもさまざまな書き方があります。最短の書き方を探す前に、その要素がどの親の中で、どの方向へ動くのかを読み解きましょう。指定の数より、あとから変更理由を説明できることが大切です。

伸縮と幅を決める｜grow・shrink・basisの役割

三つの値を、余る・足りない・基準で読む

flex-growは余った主軸方向の空間を受け取って伸びる際の係数、flex-shrinkは足りない空間へ収めるために縮む際の係数、flex-basisは伸縮を考える基準のサイズです。それぞれを、最終的な横幅そのものと同じ意味にしないことが重要です。

flexという一括指定では、これらをまとめて書けます。学習の最初は、flex:1だけを丸暗記するより、flex:1 1 240pxのように三つを明示して読む方法が分かりやすいでしょう。今回のカード例では、この形で基準となる大きさと伸縮の許可を示します。

widthとflex-basisの関係も、主軸の方向やautoなどの値で考える必要があります。rowの練習だからといって、basisをいつも固定の横幅と呼ぶとcolumnで混乱します。まず「主軸方向の基準」と読み、現在の方向に当てはめてください。

growの比率は、最終幅の比率と限らない

下の例では、親を600px、三つの子の基準を100pxずつとし、中央のgrowを2、両端を1にしています。余白や境界、内容の最小サイズなど追加の制約を除いた単純な条件では、残る300pxを1対2対1で分けます。追加される幅は75px、150px、75pxです。

.ratio {
  display: flex;
  width: 600px;
}
.ratio > div {
  flex: 1 1 100px;
  min-width: 0;
}
.ratio > div:nth-child(2) {
  flex-grow: 2;
}

この仮定での最終幅は175px、250px、175pxになります。中央が250pxだからといって、両端のちょうど二倍ではありません。growの2は、この例では追加する余白の配分を表すためです。基準が同じか、違うかでも結果の解釈は変わります。

実際のコードでは、padding、border、gap、最小・最大サイズ、長い内容などが関係します。例の数値をそのまま別の画面の予測へ使わず、条件をそろえて確認してください。比率の詳細は、MDNの主軸方向の比率の制御が参考になります。

shrinkが同じでも、同じピクセル数だけ縮むとは限らない

空間が足りない場合の縮み方は、shrinkの係数だけでなく、基準となるサイズにも関係します。同じshrink:1でも、大きい基準を持つものと小さい基準を持つものが、同じ量だけ縮むとは限りません。数値が同じなのに幅の変化が違うときは、基準も確認します。

さらに、内容に由来する最小サイズや明示したmin-widthなどが、縮める範囲に影響します。長いURL、改行しにくい文字列、画像などが入っていると、予想より縮まないことがあります。そこで、shrinkの値だけを大きくしても解決しない場合があります。

縮ませたくないアイコンなどでは、必要に応じて縮小しない設定を考えます。ただし、すべての子を縮まないようにすると、狭い画面ではみ出しやすくなります。固定して守る部分と、伸縮や折り返しで対応する部分を分けましょう。

※表は横にスクロールできます。

min-width:0を使う理由を理解する

フレックスアイテムの自動的な最小サイズが、想定より大きく働くことがあります。横並びの中でテキスト領域を縮めたいのに長い文字列が押し広げる場合は、対象アイテムのmin-width:0を検討できます。ただし、どの要素が縮められないのかを確認してから付けます。

min-width:0を指定することと、文字を適切に折り返すことは別です。箱が縮んでも、内容に改行機会がなければ、文字が外へ出る場合があります。その場合は、overflow-wrapなど文字の扱いも目的に合わせて考えます。見えない部分を切り捨ててよいかは、内容の重要性で判断します。

縦方向のFlexboxでは、似た問題を高さやmin-heightの関係として考える場面もあります。横の対処をそのまま付け足すのではなく、今の主軸と、制約になっている寸法を確認してください。「困ったら全部に0」とするより、原因と対応を一組で理解しましょう。

均等幅にしたいときの条件をそろえる

カードを均等にしたい場合は、基準サイズとgrowの考え方をそろえる方法があります。ただし、内容の最小サイズや余白の違いがあれば、見た目が単純な均等にならないこともあります。等分の意図があるなら、同じpaddingやbox-sizingなど周辺条件も確認します。

flex:1という短い指定はよく見かけますが、省略形の展開や基準値の扱いを理解して使う方が安心です。学習中は、意図したgrow・shrink・basisを明示し、値を一つだけ変えて結果を比較してみてください。短く書くことは、意味が分かってからでも遅くありません。

逆に、内容の長さに合わせたいボタン群をすべて均等幅へする必要はありません。何をそろえたいか、どこに違いがあってよいかを先に決めます。レイアウトの目的を言葉にすると、見た目を偶然合わせるための指定を減らせます。

折り返しとスマホ表示｜カード一覧・ナビゲーションで練習する

カードのHTMLを、意味の順序で用意する

次は、学習内容を紹介する三つのカードを並べます。HTMLは、読んでほしい順番で書きます。見た目の都合で順序を入れ替える前に、CSSを外しても内容の流れが理解できることを確認してください。装飾と文書の意味を分けておくと、狭い画面にも対応しやすくなります。

<div class="cards">
  <article class="card">
    <h3>HTMLの練習</h3>
    <p>見出しと段落で情報を整理します。</p>
  </article>
  <article class="card">
    <h3>CSSの練習</h3>
    <p>文字量を変えて、並び方と余白を確認します。</p>
  </article>
  <article class="card">
    <h3>表示の確認</h3>
    <p>幅を狭くし、内容がはみ出さないか調べます。</p>
  </article>
</div>

ここではcardsが一覧の親、articleが直接の子です。article内の見出しと段落は、cardsの直接の子ではありません。カードを横並びにする指定と、カード内部を整える指定は、階層が違うことを意識します。

wrapと基準幅を組み合わせる

次のCSSでは、flex-wrap:wrapで折り返しを許可し、各カードへflex:1 1 240pxを指定しています。240pxはこの練習用の基準で、どの案件にも推奨される数値ではありません。内容と掲載領域に合わせて調整し、横幅を変えて結果を観察します。

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  box-sizing: border-box;
  flex: 1 1 240px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #b8ceca;
}
.card p {
  overflow-wrap: anywhere;
}

幅が広い場合は複数のカードが一行に入り、狭くなると次の行へ移ることを想定した例です。最後の行に一枚しかない場合、その一枚がgrowによって広くなることがあります。これを不具合と決めつけず、余った空間を受け取る指定になっているかを確認します。

すべての行で列の位置を厳密にそろえたいなら、Gridなど別の手法も検討できます。Flexboxの折り返しは、各行で空間配分が行われる点が重要です。MDNの折り返しガイドで、複数行の考え方を確認してください。

画面幅だけでなく、内容も変えて試す

三つのカードを同じ短い文にすると、崩れにくい条件だけを見て終わってしまいます。一つだけ長い見出しにする、本文を増やす、長い英数字を入れる、カードを一枚増やすなど、内容の変化を試します。実際の更新で起こりそうな条件を用意することが大切です。

幅は、代表的なスマートフォンとパソコンの二点だけでなく、その中間も確認します。境界付近で一枚だけ折り返す、長いナビゲーションが押し出されるといった問題は、特定の幅で起きることがあります。ブラウザーの開発者ツールで少しずつ幅を変え、どこから変化するかを見ます。

本記事のサンプルは、宣言の構造とHTMLの親子関係、単純な余白の計算を点検した学習例です。すべてのブラウザーや実端末での表示を保証するものではありません。自分の環境で、文字の拡大や内容の差し替えも含めて確認してください。

※表は横にスクロールできます。

ナビゲーションは項目の増加と操作を確認する

メニューを横並びにする場合は、ulなど内容に合うHTMLを使い、親にFlexboxを設定する方法があります。下のCSSは、navというclassを付けたリストを折り返し可能にする例です。リンクの名称は、実際の行き先が分かるものを使います。

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: block;
  padding: 8px;
}

短い項目では収まっていても、「制作した作品を見る」のように長い言葉へ変えると、行数や間隔が変わります。リンクを一つ追加し、狭い画面で読めるか、押す領域が窮屈になっていないかを確認します。横一列を守るために、文字を極端に縮めることは避けましょう。

折り返すメニューが目的に合わない場合は、別のナビゲーション設計が必要なこともあります。Flexboxだけで、開閉するメニューの動作やキーボード操作まで完成するわけではありません。表示の配置と、操作する仕組みは別に検討します。

メディアクエリーは崩れ方に合わせて使う

画面幅によって横並びから縦並びへ明示的に切り替えたい場合は、メディアクエリーでflex-directionなどを変更する方法があります。切り替える幅は、特定の端末名だけで決めるより、内容が無理なく読めるかを見て設定します。

たとえば、説明と画像を横に並べた領域で、文字列が細くなりすぎるなら、その前に縦へ切り替えることを考えます。単に二列が維持できるかだけでなく、行の長さ、画像の意味、読む順番を確認してください。

まずwrapだけで自然に対応できるのか、別の構造や方向へ変える必要があるのかを分けます。メディアクエリーを増やす前に、固定幅や最小サイズなど、不要な制約が残っていないかを調べると、コードをシンプルにできる場合があります。

崩れたレイアウトを調べる｜最小幅・順序・検証の手順

効かない指定は、対象と最終的な値から調べる

Flexboxが効かないように見えたら、まずCSSが読み込まれているか、セレクターが対象に一致しているかを確認します。別のclass名、保存していないファイル、違うHTMLを開いているなど、配置以前の原因もあります。表示を直す指定を足す前に、今どのルールが適用されているかを見ます。

開発者ツールで対象を選ぶと、適用されたスタイルや打ち消された宣言を調べられます。親が本当にdisplay:flexか、子が直接の子か、後から書いたルールでdirectionが変わっていないかを確認します。見た目だけで推測するより、計算後の値を手掛かりにしてください。

原因を探すときは、一度に多数の指定を変えません。gapを外す、固定幅を外す、min-widthを確認するといった小さな操作で、結果の差を見ます。直った場合も、どの条件が関係したのかを記録しておくと、同じ問題へ戻りにくくなります。

はみ出しをoverflow:hiddenだけで隠さない

横にはみ出すときにoverflow:hiddenを付けると、見た目のはみ出しは隠れるかもしれません。しかし、読めるべき文字や押すべきリンクまで切れていたら、問題を解決したことにはなりません。まず、どの箱または内容が領域を超えているかを確認します。

長い文字列なら折り返し、画像なら元の大きさと表示の上限、アイテムなら最小サイズや基準幅を調べます。親のpaddingやgapを含めた合計が収まるかも見ます。別の要素が原因なのに、ページ全体へ隠す指定を付けると、後の調査が難しくなります。

意図的に切り取りたい画像などでは、隠す指定が適切な場合もあります。大切なのは、何を隠してよいかを決めて使うことです。必要な情報へ別の方法で到達できるかも含めて、内容の意味に合わせて判断しましょう。

※表は横にスクロールできます。

見た目の順序とHTMLの順序をずらしすぎない

orderやreverse系の指定を使うと、見た目の並びを変えられます。ただし、HTMLの意味の順序や読み上げ、キーボードによる移動が、その見た目と同じになるとは限りません。視覚上の調整だけで、利用者の理解や操作を損なわないかを確認する必要があります。

MDNのフレックスアイテムの順序でも、並び替えによる問題が説明されています。文章や操作に順序の意味がある場合は、HTML自体を正しい順番にし、CSSは見た目を整える役割として考える方が安全です。

確認時は、マウスだけでなくキーボードでもリンクをたどります。目で見ている順番と移動が大きくずれる場合は、利用者が迷う原因になります。デザインの都合と文書の意味が衝突したら、見た目だけを優先せず、構成から見直してください。

最小の再現例を作ると原因が見つけやすい

大きなページで分からなくなったら、問題の親と子だけを練習用HTMLへ抜き出します。関係のない画像や装飾を外し、同じ症状が起きる最小の状態を探します。本番のファイルを直接削りながら調べるのではなく、安全な作業用コピーで進めましょう。

小さい例では正常なら、周囲のCSSや祖先要素の制約が関係している可能性があります。逆に、小さくしても同じなら、軸・基準サイズ・内容の最小幅など、基本の条件を確認します。原因の範囲を分けることが、闇雲な指定追加を減らします。

相談するときは、期待する配置、実際の配置、HTMLとCSSの最小例、確認した幅を添えます。個人情報や仕事の非公開素材を含めず、架空の文字へ置き換えても再現する形にします。説明しようと整理するだけで、自分で原因に気づくこともあります。

練習の到達点を、説明できることに置く

一通り動かしたら、親と子を指し示し、主軸と交差軸を説明し、余白をどの指定が扱っているかを話してみてください。さらに、画面幅や文字量を変える前に、どこが伸び、どこで折り返すかを予想します。結果と比べることで、理解が曖昧な部分が分かります。

コードを写せる段階から、自分で条件を変えて直せる段階へ進むことが、Web制作では役立ちます。レビューや基礎の整理に支援が必要なら、副業向けプログラミングスクールの学習・支援比較で、コード添削や質問の範囲を確認できます。まず自分の例で困った点を整理してから比較しましょう。

Flexboxは、中央寄せの呪文ではなく、親の中で子を並べ、空間を配分する仕組みです。親子、軸、余白、伸縮、内容の制約を順番に見ると、崩れた理由も説明しやすくなります。小さな三要素から始め、条件を一つずつ変えながら、自分で確かめる練習を続けてください。