問題4: flex-wrapで折り返されない

問題

flex-wrap: wrapを指定したのに、要素が折り返されずに横並びのままになってしまいます。何が原因でしょうか？

HTML

<div class="container">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
  <div class="card">カード5</div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f0f0f0;
  padding: 10px;
  width: 500px;
}

.card {
  background-color: #9C27B0;
  color: white;
  padding: 20px;
  margin: 5px;
  flex: 1;  /* この指定に注目 */
}

実行結果

カード1
カード2
カード3
カード4
カード5

※ 全て1行に収まってしまい、折り返されません

🔧 実際に試してみよう（リアルタイム更新）

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。
CSSの min-width: 150px; を追加して、違いを確認してみましょう。

📺 ライブプレビュー
更新中

ヒント

クリックしてヒントを表示

フレックスアイテムが折り返されるためには、最小幅を超える必要があります。

flex: 1のショートハンドは、flex-shrink: 1も含むため、要素が縮小可能になります。

各要素に最小幅を設定するか、flexプロパティの設定を見直す必要があります。

解答

クリックして解答を表示

問題の原因

flex: 1はflex-grow: 1, flex-shrink: 1, flex-basis: 0の省略記法です。flex-shrink: 1により要素が無制限に縮小可能になり、flex-basis: 0により基本幅が0になるため、全ての要素が1行に収まってしまいます。

折り返しが発生する条件

  • flex-wrap: wrapが設定されている
  • フレックスアイテムの最小幅の合計がコンテナ幅を超える
  • flex-shrinkが0または最小幅が確保されている

flex: 1では要素が無制限に縮小するため、折り返し条件を満たしません。

修正方法

方法1: 最小幅を設定

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: #f0f0f0;
  padding: 10px;
  width: 500px;
}

.card {
  background-color: #9C27B0;
  color: white;
  padding: 20px;
  margin: 5px;
  flex: 1;
  min-width: 150px;  /* 最小幅を設定 */
}
修正後の結果
カード1
カード2
カード3
カード4
カード5

※ 適切に折り返されるようになりました

方法2: flex-basisで基本幅を設定

.card {
  background-color: #9C27B0;
  color: white;
  padding: 20px;
  margin: 5px;
  flex: 0 1 30%;  /* grow: 0, shrink: 1, basis: 30% */
}
flex-basisでの結果
カード1
カード2
カード3
カード4
カード5

方法3: 固定幅を設定

.card {
  background-color: #9C27B0;
  color: white;
  padding: 20px;
  margin: 5px;
  width: 150px;  /* 固定幅 */
  flex: none;    /* flex-grow: 0, flex-shrink: 0 */
}

レスポンシブなカードレイアウト例

/* レスポンシブ対応のベストプラクティス */
.card {
  flex: 1 1 calc(33.333% - 10px);  /* 3列レイアウト */
  min-width: 150px;                 /* 最小幅を確保 */
  max-width: 300px;                 /* 最大幅を制限 */
}

/* メディアクエリでの調整 */
@media (max-width: 768px) {
  .card {
    flex: 1 1 calc(50% - 10px);   /* 2列レイアウト */
  }
}

@media (max-width: 480px) {
  .card {
    flex: 1 1 100%;                /* 1列レイアウト */
  }
}

覚えておくポイント

  • flex-wrap: wrapだけでは折り返しは保証されない
  • 要素の最小幅がコンテナ幅を超える必要がある
  • min-widthまたは適切なflex-basisの設定が重要
  • flex: 1は全要素を1行に収めようとする
  • カードレイアウトにはflex-basisとmin-widthの組み合わせが効果的