display: flexの使い方｜横並び・中央寄せ・折り返しを初心者向けに解説

display: flexは、HTML要素を横並びにするときによく使うCSSです。ただし、並べたい子要素ではなく一つ上の親要素へ指定する必要があります。

Flexboxを使うと、横並びだけでなく、中央寄せ、均等配置、間隔、折り返し、伸縮もまとめて制御できます。画面幅に合わせてカードが並び替わるレスポンシブなレイアウトにも便利です。

この記事では、Flexboxの親子関係と軸の考え方から、実際の横並び・中央寄せ・カード一覧まで順番に解説します。コピーできるHTMLとCSSを使い、変更前と変更後の違いを確認しましょう。

display: flexとは

display: flexは、要素の内側へFlexboxというレイアウト方法を作る指定です。Flexboxは、子要素を横方向または縦方向という一方向に並べ、空きスペースの分配や整列を行います。

<div class="card-list">
  <article class="card">HTML</article>
  <article class="card">CSS</article>
  <article class="card">JavaScript</article>
</div>

.card-list {
  display: flex;
}

変更前のarticleは通常フローで縦に並びます。親の.card-listへdisplay: flexを追加すると、直下にある3つのarticleが横一列に並びます。

flexコンテナーとflexアイテム

• flexコンテナー：display: flexを指定した親要素
• flexアイテム：flexコンテナーの直下にある子要素

Flexboxの影響を直接受けるのは、原則として直下の子要素です。孫要素もFlexboxで並べたい場合は、その親にも別のdisplay: flexを指定します。

blockやgridなど、display全体の値を比較したい方は次の記事を先に確認してください。

Flexboxの主軸と交差軸

Flexboxでは、「横」「縦」だけでなく主軸と交差軸を基準に考えます。主軸はflexアイテムが並ぶ方向、交差軸は主軸と直角に交わる方向です。

上の図は、Flexboxでよく使う設定をまとめたものです。上段は軸・方向・主軸の配置、下段は交差軸の整列・折り返しと間隔・伸縮を表しています。

flex-directionで主軸を決める

.card-list {
  display: flex;
  flex-direction: column;
}

初期値はrowなので、横並びだけなら省略できます。columnに変えると主軸が縦方向になり、子要素は上から下へ並びます。

row-reverseやcolumn-reverseは見た目の順序だけを変え、HTMLの読み上げ順やキーボードの移動順は変えません。意味のある順番はHTML側で正しく書き、reverseを代用しないでください。

Flexboxで横並びを作る基本手順

プロフィールカードを3枚並べる例で、変更前から完成まで見ていきましょう。最初はHTMLだけなので、カードが縦に積まれます。

<section class="profiles">
  <article class="profile">
    <h2>佐藤さん</h2>
    <p>HTMLを学習中です。</p>
  </article>
  <article class="profile">
    <h2>鈴木さん</h2>
    <p>CSSを学習中です。</p>
  </article>
  <article class="profile">
    <h2>高橋さん</h2>
    <p>JavaScriptを学習中です。</p>
  </article>
</section>

まず各カードの見た目を整えます。この段階では親へFlexboxを指定していないため、3枚は縦並びのままです。

*,
*::before,
*::after {
  box-sizing: border-box;
}

.profile {
  padding: 1.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  background-color: #ffffff;
}

次に、3枚の共通の親である.profilesへdisplay: flexを追加します。カード間の余白にはgapを使います。

.profiles {
  display: flex;
  gap: 1rem;
}

.profile {
  flex: 1;
  padding: 1.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  background-color: #ffffff;
}

変更後は3枚が横に並び、flex: 1によって利用できる幅を均等に分けます。gapはアイテム同士の間だけに余白を作るので、端の余白を別に計算する必要がありません。

justify-contentで主軸方向へ配置する

justify-contentは、主軸方向に余ったスペースをどのように分配するか指定します。初期のflex-direction: rowでは、通常は横方向の配置です。

横方向の中央寄せ

.button-list {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

ボタンの合計幅より親の方が広いとき、余ったスペースが左右へ均等に分かれ、ボタン列が中央に移動します。アイテムが親幅いっぱいまで伸びている場合は余白がないため、見た目が変わらないことがあります。

両端へ分けるヘッダー

<header class="site-header">
  <a class="logo" href="/">WP-LOAD</a>
  <nav aria-label="メインナビゲーション">
    <ul class="nav-list">
      <li><a href="/guide/">学習ガイド</a></li>
      <li><a href="/articles/">記事一覧</a></li>
    </ul>
  </nav>
</header>

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1rem;
}

.nav-list {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

space-betweenによってロゴが先頭、ナビゲーションが末尾へ配置されます。ナビゲーション内部のliも横並びにするため、ul自身へ別のFlexboxを設定しています。

align-itemsで交差軸方向へ整列する

align-itemsは、flexアイテムを交差軸方向のどこへ揃えるか指定します。主軸が横なら通常は縦方向、主軸が縦なら通常は横方向の整列です。

縦横の中央寄せ

<div class="hero">
  <p>画面の中央に配置する内容</p>
</div>

.hero {
  min-height: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero p {
  margin: 0;
}

justify-content: centerで主軸、align-items: centerで交差軸の中央へ配置します。縦方向の中央寄せには、親側にmin-heightなどの利用できる高さが必要です。

align-selfで一つだけ整列を変える

.card-list {
  min-height: 16rem;
  display: flex;
  align-items: flex-start;
}

.card--featured {
  align-self: center;
}

全体は交差軸の先頭へ揃え、.card--featuredだけを中央へ移動します。個別の例外が増えすぎる場合は、HTML構造やコンテナーの分け方も見直しましょう。

flex-wrapで折り返す

Flexboxは初期状態ではflex-wrap: nowrapなので、すべてのアイテムを一つの行へ収めようとします。狭い画面でカードを次の行へ送るにはwrapを指定します。

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 16rem;
}

flex: 1 1 16remでは、16remを基準にカードが伸び縮みします。複数枚が入らない画面幅になると、flex-wrap: wrapによって次の行へ移ります。

flex-flowで方向と折り返しをまとめる

.card-list {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}

flex-flowは、flex-directionとflex-wrapをまとめる一括指定です。最初は個別に書いて意味を確認し、慣れてから短くしても構いません。

複数行全体はalign-contentで配置する

align-contentは、折り返して複数行になったflexライン全体を交差軸方向へ配置します。効果を確認するには、複数行と余った交差軸方向のスペースが必要です。

.tag-list {
  min-height: 14rem;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.75rem;
}

align-itemsは各flexライン内のアイテム、align-contentは複数のライン全体を揃える点が違います。1行しかない場合、align-contentを変えても結果は見えません。

gapでアイテム間の余白を作る

gapはflexアイテム同士の間隔を指定します。各カードへ右marginを付ける方法と違い、最後の要素だけ余白を消す処理が不要です。

.card-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 2rem;
}

column-gapは列間、row-gapは行間を指定します。両方が同じならgap: 1.5remのように一つで書けます。

flexアイテムの幅を伸縮させる

flexアイテムには、余ったスペースを受け取るflex-grow、足りないときに縮むflex-shrink、伸縮前の基準サイズを決めるflex-basisがあります。

flex一括指定を使う

.sidebar {
  flex: 0 1 18rem;
}

.main-content {
  min-width: 0;
  flex: 1 1 36rem;
}

flexはgrow、shrink、basisをまとめる一括指定です。サイドバーは余白があっても積極的に伸びず、メインコンテンツは余った幅を受け取ります。

flexアイテムは内容より小さくならない自動最小サイズを持つため、長いURLやコードがあると横にはみ出す場合があります。縮めたいアイテムへmin-width: 0を付け、内容側の折り返しも確認してください。

画像と文章を横並びにする

画像と説明文の組み合わせは、Flexboxの代表的な使いどころです。画像の大きさを固定し、文章側だけ伸びる構成を作ります。

<article class="media">
  <img class="media__image" src="profile.jpg" alt="講師の佐藤さん">
  <div class="media__body">
    <h2>講師プロフィール</h2>
    <p>HTMLとCSSの基礎を初心者向けに解説します。</p>
  </div>
</article>

.media {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.media__image {
  width: 8rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.media__body {
  min-width: 0;
  flex: 1;
}

画像は8remの正方形にし、文章部分へ残りの幅を割り当てます。画像を複数枚横並びにする手順は、次の記事でより詳しく解説しています。

Flexboxをレスポンシブ対応する

横並びをスマートフォンで縦並びへ変える方法は、折り返しを使う方法とメディアクエリで方向を変える方法があります。内容に合う方を選びましょう。

自然に折り返すカード一覧

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 18rem;
}

カードが18rem程度を保てる範囲で横に並び、入らなくなると次の行へ移ります。端末名ごとの固定ブレークポイントを増やさず、内容に応じて変化させられます。

狭い画面だけ縦方向へ変える

.media {
  display: flex;
  gap: 1.5rem;
}

@media (max-width: 40rem) {
  .media {
    flex-direction: column;
  }
}

画面幅40rem以下で主軸を縦方向へ変えます。画像と文章を必ず一つずつ縦に積みたい場合のように、レイアウトを明確に切り替えるときに向く方法です。

viewport設定や画像・文字サイズまで含めたスマートフォン対応は、次の記事も参考にしてください。

FlexboxとGridの違い

横並びだから必ずFlexboxというわけではありません。一方向の並びと内容に応じた伸縮はFlexbox、行と列を揃える二次元配置はGridを目安にしてください。

display: flexが効かないときの確認項目

並べたい要素の親へ指定しているか

/* 誤り：カードの内側だけがFlexboxになる */
.card {
  display: flex;
}

/* 正しい：直下のカードが横並びになる */
.card-list {
  display: flex;
}

flexアイテムにしたい要素をHTMLで探し、一つ上の共通の親へ指定します。余計なラッパーが間にあると、そのラッパーだけがflexアイテムになります。

縦中央にするための高さがあるか

align-items: centerを書いても、親の高さが子要素と同じなら移動できる空間がありません。背景色や枠線を一時的に付け、flexコンテナーの実際の高さを確認しましょう。

justify-itemsではなくjustify-contentを使っているか

Flexboxではjustify-itemsは無視されます。アイテムのまとまりを主軸方向へ配置する場合はjustify-content、一つだけ交差軸の位置を変える場合はalign-selfを使います。

折り返しと縮小を確認する

アイテムが想定より細くなるのは、初期値のflex-shrink: 1で縮んでいる可能性があります。次の行へ送りたい場合はflex-wrap: wrapと適切なflex-basisを設定します。

開発者ツールで最終値を確認する

ブラウザの開発者ツールで親要素を選び、Computedのdisplayがflexになっているか確認します。Stylesで打ち消し線が付いていれば、別のCSSに上書きされています。

Flexboxを使うときのアクセシビリティ

orderやrow-reverseを使うと、見た目の順番だけを変えられます。しかし、読み上げ順やキーボードのフォーカス順は通常HTMLのソース順に従うため、視覚との不一致が生まれます。

• 見出し、文章、フォーム、ナビゲーションは意味の通るHTML順で書く
• orderやreverseを論理的な並べ替えの代わりに使わない
• 狭い画面で並びを変えた後も読み上げ順とフォーカス順を確認する
• 見た目だけでなく、キーボード操作と支援技術でも確認する

display: flexについてよくある質問

display: flexだけで横並びになりますか？

初期値のflex-direction: rowにより、直下の子要素は通常横並びになります。ただし、子要素の合計幅、折り返し、絶対配置、CSSの上書きなどによって見え方は変わります。

display: flexを子要素にも書きますか？

子要素同士を並べるだけなら親への指定で十分です。その子の内側にあるアイコンや文字もFlexboxで並べたい場合は、子要素自身を別のflexコンテナーにできます。

横並びの順番を変えるにはどうしますか？

意味のある順番なら、HTMLのソース順を直してください。orderやreverseは視覚的な調整に限り、読み上げ順・フォーカス順と一致するか必ず確認します。

スマホではdisplay: blockへ戻す必要がありますか？

必須ではありません。flex-wrap: wrapで自然に折り返す、またはflex-direction: columnで縦並びにする方法なら、flexコンテナーのまま対応できます。

display: flexの使い方まとめ

display: flexは、並べたい要素の共通の親へ指定します。親がflexコンテナー、直下の子がflexアイテムとなり、初期状態では主軸方向の横一列に並びます。

主軸の配置はjustify-content、交差軸の整列はalign-items、折り返しはflex-wrap、間隔はgapです。まず4つを使い、必要になったらflexによる伸縮やalign-contentへ進みましょう。

Flexbox以外のCSSコードも目的別に探したい場合は、次の一覧を活用してください。

仕様を詳しく確認するときは、MDNのフレックスボックス、フレックスボックスの基本概念、flexプロパティ、W3CのCSS Flexible Box Layout Moduleも参考になります。