💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
CSSでflex-wrapで折り返す方法
📌
結論
flex-wrap: wrap で子要素を折り返せます
📝 実際のコードはこちら
.container { display: flex; flex-wrap: wrap; }wrap を指定して初めて折り返されます。
まとめ
・flex-wrap: wrap で折り返し有効
・デフォルトは nowrap
・カード一覧やタグ一覧によく使う
演習で試してみよう
flex-wrapで折り返しを試してみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
Flexboxで子要素がはみ出したら折り返すようにしてください。
詰まったらヒント
flex-wrap: wrap;