Flex Wrap

Flex Wrap

By default, flex items squeeze into one line — they shrink to fit. The flex-wrap property lets items wrap to the next line when there isn't enough room, creating multi-line layouts.

Default: No Wrapping

.container {
    display: flex;
    /* flex-wrap: nowrap; ← default */
}

/* Even with 10 items, they all squeeze into one line,
   shrinking as needed. This can break layouts! */

Enabling Wrapping

.container {
    display: flex;
    flex-wrap: wrap;
}

/* Items now wrap to the next line when they can't fit.
   Each item keeps its natural size. */

flex-wrap Values

Value	Behavior
nowrap (default)	All items in one line — they shrink to fit
wrap	Items wrap to the next line when no room
wrap-reverse	Items wrap upward (reversed cross axis)

Creating a Responsive Card Grid

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 280px;
    /* flex-grow: 1 — cards expand to fill space
       flex-shrink: 1 — cards can shrink 
       flex-basis: 280px — each card starts at 280px
       Cards that can't fit at 280px wrap to the next line */
}

/* Result:
   Desktop: 3 cards per row
   Tablet:  2 cards per row
   Mobile:  1 card per row
   All without media queries! */

How Wrapping Determines Line Breaks

1. Flex calculates the total width of all items
2. If total exceeds the container, items that don't fit move to the next line
3. Each line is laid out independently (items on each line share that line's space)
4. The process repeats for remaining items

flex-flow Shorthand

Combines flex-direction and flex-wrap:

/* Longhand */
flex-direction: row;
flex-wrap: wrap;

/* Shorthand */
flex-flow: row wrap;

/* Column with wrapping */
flex-flow: column wrap;

align-content — Controlling Wrapped Lines

When items wrap, align-content controls how lines are distributed on the cross axis:

Value	Behavior
stretch (default)	Lines stretch to fill the container
flex-start	Lines packed at the top
flex-end	Lines packed at the bottom
center	Lines centered vertically
space-between	Equal space between lines
space-around	Equal space around lines

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    /* Wrapped lines pack at the top instead of stretching */
}

Note: align-content only works when there are multiple lines (i.e., flex-wrap: wrap is active and items have actually wrapped).

Tag/Chip Cloud with Flex Wrap

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    padding: 6px 14px;
    background: #e8f4fd;
    color: #2980b9;
    border-radius: 20px;
    font-size: 13px;
    white-space: nowrap;
}

Tags flow left to right, wrapping naturally when the row is full.

Key Takeaways

• flex-wrap: nowrap (default) — all items on one line, items shrink to fit
• flex-wrap: wrap — items wrap to the next line when they can't fit
• flex-flow is shorthand for flex-direction + flex-wrap
• align-content controls the spacing between wrapped lines
• Combine flex-wrap with flex-basis for responsive grids without media queries