Skip to content
Layout

flex-wrap

Controls whether flex items stay on one line or wrap onto additional lines when space runs out.

49 effects in the catalog use this property.

Syntax

flex-wrap: nowrap | wrap | wrap-reverse;

Watch out

The default is `nowrap`; items shrink rather than moving to a new line. This is a common reason responsive card rows become crushed on narrow screens.

Effects using flex-wrap

These are working effects from the catalog. Open a tile to inspect the full source.