Flex Wrap & Gap
Let items wrap to new lines and add spacing.
Syntax
flex-wrap: wrap; gap: 12px;By default flex items stay on one line and may shrink. Setting flex-wrap: wrap lets them flow onto new lines when space runs out.
The gap property adds consistent spacing between flex items without needing margins.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer adds flex-wrap: wrap to a tag list so tags automatically break onto a new line instead of overflowing their container.
- A designer uses gap with flex-wrap: wrap on a photo gallery grid so photos reflow responsively without media queries.
- A developer sets flex-wrap: nowrap on a horizontally scrollable list of cards to force them all into one scrollable row.
More examples
Wrapping tag list
Allows tags to wrap to the next line and uses gap for consistent spacing without margin hacks.
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
background: #eef3ff;
color: #2965f1;
padding: 4px 12px;
border-radius: 50px;
font-size: 0.85rem;
}Responsive gallery with wrap and gap
Combines flex-wrap with flex: 1 1 240px so gallery items fill the row and wrap when they can't fit, adapting to any screen width.
.gallery {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.gallery-item {
flex: 1 1 240px;
height: 180px;
object-fit: cover;
border-radius: 8px;
}Horizontal scroll with nowrap
Forces all cards into one non-wrapping row that becomes horizontally scrollable when cards overflow the viewport.
.card-scroller {
display: flex;
flex-wrap: nowrap;
gap: 16px;
overflow-x: auto;
padding-bottom: 8px;
scrollbar-width: thin;
}
.card-scroller .card {
flex: 0 0 220px;
}
Discussion