【完全版】display:flexで要素が折り返されない原因と解決方法｜flex-wrapでレスポンシブ対応

Web制作で「display:flex」を使って横並びレイアウトを組んだとき、「なぜか折り返されずに画面からはみ出してしまう…」そんな経験はありませんか？PCでは綺麗に見えても、スマホで確認すると要素が見切れてしまい、デザインが崩れてしまうことはよくあります。特に商品一覧やカードレイアウトなど複数の要素を並べる場面では、思った通りに折り返せずに悩む方も多いはずです。

実は、display:flexだけを指定しても要素は自動的に折り返されません。折り返しを実現するにはflex-wrapというプロパティが必須ですが、「wrapを指定したのに思った通りに動かない」「折り返した後の要素が中央に寄ってしまう」「余白が不揃いになる」など、新たな壁にぶつかることも少なくありません。

この記事では、Flexboxで折り返しを思い通りにコントロールする方法を、基礎から応用までサンプルコード付きで分かりやすく解説します。短時間で解決できるシンプルな答えだけでなく、レスポンシブ対応や実務で使える応用例もまとめていますので、すぐに現場で活用できます。

Flexboxの折り返しを理解すれば、カードレイアウトや商品一覧などで美しいレスポンシブデザインを実現できます。さっそく、基礎から応用まで一緒に整理していきましょう。

コストパフォーマンスに優れた高性能なレンタルサーバー

display flexで要素が折り返されない理由と基本設定

Webサイトを制作していて「display flexを使ったのに、要素が画面幅からはみ出してしまう」という経験はありませんか？実はこれ、Flexboxの初期設定による正常な動作なのです。この章では、なぜdisplay flexだけでは要素が折り返されないのか、そして思い通りに折り返すための必須設定について詳しく解説していきます。

なぜdisplay flexだけでは折り返されないのか？

Flexbox（Flexible Box Layout）は、要素を一方向に効率的に配置することを目的として設計されたレイアウト手法です。つまり、横方向（row）または縦方向（column）の単一軸に沿って要素を整列させることが基本コンセプトなのです。

/* 基本的なFlexbox設定 */
.container {
  display: flex; /* 初期設定では横方向に配置 */
}

この初期設定では、以下のような特徴があります：

• flex-direction: row（横方向配置）がデフォルト
• flex-wrap: nowrap（折り返しなし）がデフォルト
• 子要素は親要素の幅を超えても、強制的に1行に収めようとする

そのため、子要素が多くなったり、各要素の幅が大きくなったりすると、画面幅からはみ出してしまうのです。これは「バグ」ではなく、Flexboxの仕様通りの動作なのです。

要素を折り返すための必須プロパティflex-wrapの使い方

要素を折り返すためには、flex-wrapプロパティを明示的に指定する必要があります。このプロパティがdisplay flex折り返しの核となる設定です。

.container {
  display: flex;
  flex-wrap: wrap; /* 折り返しを有効にする */
}

.item {
  width: 200px; /* 各要素の幅を指定 */
  height: 100px;
  background-color: #f0f0f0;
  margin: 5px;
}

<div class="container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
  <div class="item">アイテム4</div>
  <div class="item">アイテム5</div>
</div>

flex-wrapの主な値は以下の通りです：

• nowrap（デフォルト）: 折り返しなし、すべての要素を1行に配置
• wrap: 必要に応じて折り返す
• wrap-reverse: 折り返すが、行の順序を逆にする

flex-wrapで思い通りに動かないときの原因とチェックポイント

flex-wrap: wrapを設定しても思い通りに折り返されない場合、以下の原因が考えられます。

1. 親要素の幅が不十分

/* NG例：親要素に幅が指定されていない */
.container {
  display: flex;
  flex-wrap: wrap;
  /* width が指定されていない */
}

/* OK例：親要素に明確な幅を指定 */
.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%; /* または具体的な px 値 */
}

2. 子要素のmin-widthが影響している

/* NG例：min-widthが大きすぎる */
.item {
  min-width: 300px; /* 画面幅が狭いと折り返されない */
}

/* OK例：適切なmin-widthの設定 */
.item {
  min-width: 150px; /* より小さな値に調整 */
  width: 200px;
}

3. flex-shrinkの影響

/* NG例：flex-shrinkで縮小されてしまう */
.item {
  flex-shrink: 1; /* デフォルト値、要素が縮小される */
}

/* OK例：縮小を防ぐ */
.item {
  flex-shrink: 0; /* 縮小しない */
  width: 200px;
}

チェックポイント一覧

1. 親要素にwidthまたはmax-widthが設定されているか
2. 子要素のwidth、min-width、max-widthが適切か
3. flex-shrinkの値が意図した動作になっているか
4. ブラウザの開発者ツールで実際のサイズを確認する

ポイント： display flex折り返しが正常に動作するには、親要素の幅と子要素のサイズを適切にコントロールすることが重要です。flex-wrap: wrapは折り返しの「許可」を出すだけで、実際の折り返し判定は要素のサイズに依存することを覚えておきましょう。

flexboxで思い通りに折り返すためのプロパティ活用法

display flex折り返しの基本を理解したところで、今度は「思い通りに」折り返すための実践的なテクニックを学んでいきましょう。単純にflex-wrap: wrapを設定するだけでなく、要素数や配置を細かく制御する方法を身につけることで、より美しく機能的なレイアウトを実現できます。

要素を「3列で折り返す」「2列固定にする」簡単サンプルコード

1行あたりの要素数を制御するには、flex-basisまたはwidthプロパティを戦略的に活用します。計算式は以下の通りです：

1行あたりの要素数を制御する計算式

各要素の幅 = (100% - 余白の合計) ÷ 希望する列数

3列で折り返すレイアウト

.container-3col {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 要素間の余白 */
}

.item-3col {
  flex-basis: calc(33.333% - 10px); /* 3列配置 */
  /* または以下の書き方でも同じ効果 */
  /* width: calc(33.333% - 10px); */
  height: 120px;
  background-color: #e3f2fd;
  border: 1px solid #1976d2;
  box-sizing: border-box;
}

<div class="container-3col">
  <div class="item-3col">要素1</div>
  <div class="item-3col">要素2</div>
  <div class="item-3col">要素3</div>
  <div class="item-3col">要素4</div>
  <div class="item-3col">要素5</div>
  <div class="item-3col">要素6</div>
</div>

2列固定レイアウト

.container-2col {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.item-2col {
  flex-basis: calc(50% - 15px); /* 2列配置 */
  min-height: 150px;
  background-color: #f3e5f5;
  border: 1px solid #7b1fa2;
  padding: 15px;
  box-sizing: border-box;
}

重要ポイント： box-sizing: border-boxを忘れずに設定することで、padding や border を含めた正確なサイズ計算が可能になります。

折り返した後の要素を左寄せ・中央寄せ・右寄せに整列させる方法

justify-contentプロパティは、display flex折り返し時の各行内での要素配置をコントロールします。特に最後の行で要素数が少ない場合に効果を発揮します。

/* 基本設定 */
.alignment-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 10px;
}

.alignment-item {
  width: 150px;
  height: 100px;
  background-color: #fff3e0;
  border: 1px solid #f57c00;
}

/* 左寄せ（デフォルト） */
.left-align {
  justify-content: flex-start;
}

/* 中央寄せ */
.center-align {
  justify-content: center;
}

/* 右寄せ */
.right-align {
  justify-content: flex-end;
}

/* 両端揃え */
.space-between {
  justify-content: space-between;
}

/* 均等配置 */
.space-around {
  justify-content: space-around;
}

<!-- 中央寄せの例 -->
<div class="alignment-container center-align">
  <div class="alignment-item">アイテム1</div>
  <div class="alignment-item">アイテム2</div>
  <div class="alignment-item">アイテム3</div>
  <div class="alignment-item">アイテム4</div>
  <div class="alignment-item">アイテム5</div>
</div>

各プロパティ値の効果

• flex-start: 左寄せ（デフォルト）
• center: 中央寄せ
• flex-end: 右寄せ
• space-between: 最初と最後の要素を両端に配置、残りを等間隔
• space-around: 各要素の両側に等しい余白を配置
• space-evenly: すべての要素と端を等間隔で配置

flex

flex は CSS の一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。

developer.mozilla.org

折り返し時の余白や隙間をきれいに調整するコツ

美しいdisplay flex折り返しレイアウトを作るには、適切な余白設定が不可欠です。現代的なgapプロパティと従来のmarginを使い分けましょう。

gapプロパティを使った余白調整（推奨）

.modern-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 行と列の両方に20pxの余白 */
  /* または */
  /* gap: 20px 15px; */ /* 行間20px、列間15px */
}

.modern-item {
  flex-basis: calc(33.333% - 14px); /* gapを考慮した計算 */
  height: 120px;
  background-color: #e8f5e8;
}

marginを使った余白調整（従来手法）

.traditional-container {
  display: flex;
  flex-wrap: wrap;
  margin: -10px; /* 負のマージンで外側の余白をキャンセル */
}

.traditional-item {
  flex-basis: calc(33.333% - 20px);
  margin: 10px; /* 全方向に10pxの余白 */
  height: 120px;
  background-color: #fce4ec;
}

ブラウザ対応を考慮した余白設定

.compatible-container {
  display: flex;
  flex-wrap: wrap;
  /* モダンブラウザ向け */
  gap: 15px;

  /* IE11対応のフォールバック */
  margin: -7.5px;
}

.compatible-item {
  /* モダンブラウザ向け */
  flex-basis: calc(25% - 15px);

  /* IE11向けフォールバック */
  flex-basis: calc(25% - 15px);
  margin: 7.5px;
}

/* gapをサポートしていないブラウザ向け */
@supports not (gap: 15px) {
  .compatible-container {
    gap: 0;
    margin: -7.5px;
  }
}

余白調整のベストプラクティス

1. gapプロパティ優先: モダンブラウザではgapを使用
2. 計算式の統一: calc()を使って正確な幅を計算
3. レスポンシブ対応: メディアクエリで画面サイズごとに余白を調整
4. box-sizing設定: box-sizing: border-boxで計算を簡素化

ポイント： display flex折り返しで美しいレイアウトを作るには、要素のサイズ設定と余白調整の両方を適切にコントロールすることが重要です。gapプロパティは比較的新しい機能なので、対応ブラウザを確認した上で使用しましょう。IE11などの古いブラウザをサポートする場合は、marginを使った従来手法との併用が安全です。

実践的なFlexbox折り返しレイアウトの応用例

これまでdisplay flex折り返しの基本理論と設定方法を学んできました。ここからは、実際のWebサイト制作で頻繁に使われる具体的な応用例を通して、より実践的なスキルを身につけていきましょう。レスポンシブ対応からカード型レイアウト、他の手法との使い分けまで、現場で即戦力となる知識を解説します。

スマホ表示でのみ折り返すレスポンシブ対応（メディアクエリ活用）

モダンなWebサイトでは「PCでは横並び、スマホでは縦積み」というレスポンシブレイアウトが基本です。display flex折り返しとメディアクエリを組み合わせることで、デバイスごとに最適な表示を実現できます。

デスクトップ優先のアプローチ

/* デスクトップ（PC）での表示 */
.responsive-container {
  display: flex;
  flex-wrap: nowrap; /* PCでは横並びを維持 */
  gap: 30px;
  padding: 20px;
}

.responsive-item {
  flex: 1; /* 均等に幅を分割 */
  min-height: 200px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 20px;
  box-sizing: border-box;
}

/* タブレット表示（768px以下） */
@media screen and (max-width: 768px) {
  .responsive-container {
    flex-wrap: wrap; /* タブレットでは折り返しを許可 */
    gap: 20px;
  }

  .responsive-item {
    flex-basis: calc(50% - 10px); /* 2列表示 */
  }
}

/* スマートフォン表示（480px以下） */
@media screen and (max-width: 480px) {
  .responsive-container {
    flex-direction: column; /* 完全に縦積み */
    gap: 15px;
  }

  .responsive-item {
    flex-basis: auto;
    width: 100%;
  }
}

モバイルファーストのアプローチ

/* スマートフォン（基本設定） */
.mobile-first-container {
  display: flex;
  flex-direction: column; /* 最初は縦積み */
  gap: 15px;
  padding: 15px;
}

.mobile-first-item {
  background-color: #e3f2fd;
  padding: 15px;
  border-radius: 8px;
  min-height: 150px;
}

/* タブレット以上（768px以上） */
@media screen and (min-width: 768px) {
  .mobile-first-container {
    flex-direction: row; /* 横並びに変更 */
    flex-wrap: wrap; /* 折り返しを有効化 */
    gap: 20px;
  }

  .mobile-first-item {
    flex-basis: calc(50% - 10px); /* 2列表示 */
  }
}

/* デスクトップ（1024px以上） */
@media screen and (min-width: 1024px) {
  .mobile-first-container {
    gap: 30px;
  }

  .mobile-first-item {
    flex-basis: calc(33.333% - 20px); /* 3列表示 */
  }
}

レスポンシブ設計のコツ:

• ブレイクポイントは一般的な768px（タブレット）と480px（スマホ）を基準に設定
• flex-direction: columnを活用してスマホでの縦積み表示を実現
• gapの値も画面サイズに応じて調整することで、適切な余白を維持

カード型レイアウトや商品一覧で使えるコピペ可能なサンプルコード

ECサイトやブログでよく使われるカード型レイアウトの完全なコードサンプルを紹介します。このコードはそのままコピペして使用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カード型レイアウト</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .card-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .card {
      flex-basis: calc(33.333% - 14px); /* 3列基本 */
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .card-image {
      width: 100%;
      height: 200px;
      background-color: #f0f0f0;
      background-size: cover;
      background-position: center;
    }

    .card-content {
      padding: 20px;
    }

    .card-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-bottom: 8px;
      line-height: 1.4;
    }

    .card-description {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 15px;
    }

    .card-price {
      font-size: 20px;
      font-weight: bold;
      color: #e91e63;
    }

    /* タブレット対応 */
    @media screen and (max-width: 768px) {
      .card {
        flex-basis: calc(50% - 10px); /* 2列表示 */
      }

      .card-container {
        padding: 15px;
        gap: 15px;
      }
    }

    /* スマートフォン対応 */
    @media screen and (max-width: 480px) {
      .card {
        flex-basis: 100%; /* 1列表示 */
      }

      .card-container {
        padding: 10px;
        gap: 10px;
      }

      .card-image {
        height: 180px;
      }

      .card-content {
        padding: 15px;
      }
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">
      <div class="card-image" style="background-image: url('product1.jpg');"></div>
      <div class="card-content">
        <h3 class="card-title">商品タイトル1</h3>
        <p class="card-description">商品の詳細説明がここに入ります。魅力的な商品の特徴を簡潔に伝えましょう。</p>
        <div class="card-price">¥2,980</div>
      </div>
    </div>

    <div class="card">
      <div class="card-image" style="background-image: url('product2.jpg');"></div>
      <div class="card-content">
        <h3 class="card-title">商品タイトル2</h3>
        <p class="card-description">商品の詳細説明がここに入ります。ユーザーの関心を引く内容にしましょう。</p>
        <div class="card-price">¥3,480</div>
      </div>
    </div>

    <div class="card">
      <div class="card-image" style="background-image: url('product3.jpg');"></div>
      <div class="card-content">
        <h3 class="card-title">商品タイトル3</h3>
        <p class="card-description">商品の詳細説明がここに入ります。購入意欲を高める表現を心がけましょう。</p>
        <div class="card-price">¥1,980</div>
      </div>
    </div>

    <!-- 追加のカードアイテム -->
    <div class="card">
      <div class="card-image" style="background-image: url('product4.jpg');"></div>
      <div class="card-content">
        <h3 class="card-title">商品タイトル4</h3>
        <p class="card-description">商品の詳細説明がここに入ります。商品の価値を分かりやすく伝えましょう。</p>
        <div class="card-price">¥4,280</div>
      </div>
    </div>
  </div>
</body>
</html>

このサンプルコードの特徴

• 完全レスポンシブ対応: PC（3列）→ タブレット（2列）→ スマホ（1列）
• ホバーアニメーション: カードにマウスを乗せると浮き上がる効果
• モダンなデザイン: 影付きカード、角丸、適切な余白設定
• SEOフレンドリー: セマンティックなHTML構造
• 高いユーザビリティ: 読みやすいフォント、適切なコントラスト

FlexboxとGrid・float・inline-blockとの違いと使い分けポイント

display flex折り返しを効果的に使うために、他のレイアウト手法との違いと使い分けを理解しておきましょう。

各レイアウト手法の特徴比較

使い分けの具体例

/* Flexbox: 1次元の要素配置に最適 */
.navigation {
  display: flex;
  justify-content: space-between; /* 両端揃え */
  align-items: center; /* 垂直中央揃え */
}

.card-list {
  display: flex;
  flex-wrap: wrap; /* 折り返し制御 */
  gap: 20px;
}

/* Grid: 2次元の複雑なレイアウトに最適 */
.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: auto 1fr auto;
}

/* Float: 画像の回り込みなど特定用途 */
.article img {
  float: left;
  margin: 0 20px 10px 0;
}

実際の選択基準

Flexboxを選ぶべき場面:

• ナビゲーションメニューの水平配置
• カード型レイアウトの折り返し表示
• フォーム要素の整列
• 要素の垂直中央揃え

CSS Gridを選ぶべき場面:

• ページ全体のレイアウト構造
• 複雑な表形式レイアウト
• 行と列を同時に制御したい場合
• メディアクエリでレイアウト構造を大幅に変更したい場合

従来手法（Float、Inline-block）を選ぶべき場面:

• IE11以下の古いブラウザサポートが必要
• 画像の文章回り込み
• 既存コードの修正コストを最小限に抑えたい場合

ポイント: display flex折り返しは1次元レイアウトに特化した手法です。カード型レイアウトやナビゲーションなど、一方向の要素配置と折り返しが必要な場面で威力を発揮します。一方、ページ全体の複雑なレイアウト構造にはCSS Gridの方が適している場合が多いです。両方の特徴を理解し、プロジェクトの要件に応じて使い分けることが重要です。

あわせて読みたい

CSS Subgridの使い方を完全マスター！高さ揃え＆孫要素も自由自在に配置！みんながわかる実践ガイド

CSS Subgridの基本概念や従来のCSS Gridとの違いから、具体的な使い方や親子・孫要素への適用テクニックまで丁寧に解説。高さを揃える最適化方法や、よくあるトラブルの原因と解決策も紹介。さらにTailwind CSSでの使用法もコード付きでわかりやすく説明しているので、初心者の方でも安心して学べます。

watashi.xyz

2025.05.15

grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法

はじめにレスポンシブレイアウトを構築するとき、どのようにCSSを設定するのがよいのでしょうか？display:flex、display:gridのどちらかで設定を行うのがセオリーとなっています。どちらを使うかは条件によって分かれます。例えば…＜条件1＞スマホは1列、デスクトップは4列、要素は左詰めでOK＜条件2＞スマホ...

watashi.xyz

2024.02.25

よくある質問（FAQ）

display flex折り返しを学習・実装する中で多くの方が疑問に感じる点をQ&A形式でまとめました。実際の開発現場でよくある課題から、より高度な実装テクニックまで、実践的な解決策をご紹介します。

まとめ

この記事では、display flex折り返しの基本理論から実践的な応用例まで、Webサイト制作で本当に使える知識を体系的に解説してきました。「要素が画面からはみ出してしまう」という多くの方が経験する課題から始まり、美しいレスポンシブレイアウトを作るためのテクニックまで、現場で即戦力となるスキルをお伝えできたのではないでしょうか。

Flexboxが登場する以前は、floatやinline-blockを駆使してレイアウトを組むのが一般的でしたが、display flex折り返しを習得することで、より直感的で保守性の高いコードが書けるようになります。特に、スマートフォン対応が必須となった現代のWeb制作において、メディアクエリと組み合わせたレスポンシブ対応は欠かせないスキルと言えるでしょう。

実際にコードを書く際は、今回紹介したカード型レイアウトのサンプルコードを参考に、プロジェクトの要件に合わせてカスタマイズしてみてください。特に、gap値やブレイクポイントの調整、ホバーアニメーションの追加などを行うことで、より魅力的なユーザー体験を提供できます。

あわせて読みたい

【初心者OK】flexboxで横並び・縦並びの要素の高さを揃える方法 | サンプルコード付

CSSのFlexboxで横並びや縦並びの要素の高さを揃える方法を、基礎から応用までわかりやすく解説します。align-itemsやflex-growの使い分け、画像とテキスト混在時の高さ崩れ対策、レスポンシブ対応や複数行レイアウトのコツも紹介。コピペで使えるサンプルコード付きで、実務ですぐ役立ちます。

watashi.xyz

2025.07.22