CSS基礎 練習問題 72：Flexboxの折り返し
📊 Qraftユーザーの成績
- 難易度 Bランク（レーティング1200）
- 難易度 766位/2795問中
- 正答率 —（0回）
Flexbox（フレックスボックス）を使用して要素を横並びにした際、親要素の幅を超えた分を自動的に次の行へ折り返して表示させたい場合、正しいCSSの書き方はどれか。
- flex-wrap: wrap; を指定して、要素が親の幅を超えたら自動的に改行させる。
- flex-wrap: nowrap; を指定して、要素が親の幅を超えないよう自動的に縮小させる。
- flex-direction: column; を指定して、要素を最初から縦方向に並べて配置する。
- justify-content: space-between; を指定して、要素を均等な間隔で配置させる。
- align-items: stretch; を指定して、要素の高さを親要素に合わせて伸ばす。
正解と解説を見る
正解：flex-wrap: wrap; を指定して、要素が親の幅を超えたら自動的に改行させる。
Flexboxで要素が親要素の幅を超えた場合に、自動的に次の行へ折り返して表示させるには `flex-wrap: wrap;` が正解です。
【正解の理由】
`flex-wrap` はFlexboxの子要素を単一の行に押し込むか、複数行に折り返すかを制御するプロパティで、`wrap` を指定するとあふれた要素が改行されます。
【不正解の理由】
• 「『flex-wrap: nowrap;』を指定して自動的に縮小させる」は、改行されずに無理やり1行に収めようとする初期値のため誤り
• 「『flex-direction: column;』を指定して縦方向に並べて配置する」は、要素全体を最初から縦並びにするための指定であり、横並びの折り返しではないため誤り
• 「『justify-content: space-between;』を指定して均等な間隔で配置させる」は、水平方向の余白の配分ルールを決めるものであり、折り返しの設定ではないため誤り
• 「『align-items: stretch;』を指定して高さを親要素に合わせて伸ばす」は、垂直方向のサイズを揃えるための指定であり、折り返しの設定ではないため誤り