Tailwind CSS 練習問題 49：フレックスボックス（折り返し）
Tailwind CSSにおいて、Flexboxの子要素が親要素の幅を超えた場合に、自動的に次の行へ折り返して配置させたい場合、正しいものはどれか。
- 折り返しに「flex-wrap」を使用する
- 折り返しに「wrap-items」を使用する
- 折り返しに「flex-flow」を使用する
- 折り返しに「items-wrap」を使用する
- 折り返しに「auto-wrap」を使用する
正解と解説を見る
正解：折り返しに「flex-wrap」を使用する
Flexboxの子要素を自動的に次の行へ折り返させたい場合、「flex-wrap」が正解です。
【正解の理由】
Tailwind CSSでCSSの`flex-wrap: wrap;`を適用するには、そのまま「flex-wrap」というクラスを使用します。これにより、親要素の幅に収まりきらない子要素が改行して表示されます。
【不正解の理由】
• 「折り返しに『wrap-items』を使用する」は、存在しないクラス名であるため誤り
• 「折り返しに『flex-flow』を使用する」は、存在しないクラス名であるため誤り（flex-flowはCSSプロパティ名としては存在するがTailwindの折り返しクラスではない）
• 「折り返しに『items-wrap』を使用する」は、存在しないクラス名であるため誤り
• 「折り返しに『auto-wrap』を使用する」は、存在しないクラス名であるため誤り