55. Flex Container Property: flex-wrap
By default, Flexbox is designed to keep all items on a single line, even if they overflow the container. flex-wrap allows items to wrap onto multiple lines when there isn't enough space.
Available Values
| Value | Description |
|---|---|
nowrap (default) | All flex items are forced onto one line, ignoring their natural width if necessary (they shrink). |
wrap | Items will wrap onto a new line if needed, from top to bottom. |
wrap-reverse | Items will wrap onto a new line, from bottom to top. |
Example: Creating a Responsive Grid with Wrapping
When creating card layouts or galleries, you need items to wrap when the screen shrinks.
css .card-gallery { display: flex; flex-wrap: wrap; /* Allows items to flow onto the next line */ max-width: 900px; }
.card { /* Set a fluid base width, but guarantee a minimum size */ width: 300px; min-width: 250px; height: 150px; margin: 10px; }
As the viewport shrinks, the cards that don't fit on the first line will automatically drop to the second line.