Flex Wrap and Align-Content

By default, flex items do not wrap. If items exceed the container width, they shrink or overflow rather than wrapping to a new line.

With flex-wrap: wrap, items that overflow the main axis wrap to a new line (or column, in column direction). Each wrap line acts like a separate mini flex container.

wrap-reverse wraps items in the opposite cross direction: new lines appear above (in row direction) instead of below.

A classic responsive card layout where cards wrap to the next row as the viewport shrinks:

align-content controls spacing between wrapped lines on the cross axis. It has no effect when there is only one line. Values mirror justify-content.

Available values:

• flex-start — pack lines toward cross start
• flex-end — pack toward cross end
• center — center lines
• space-between — equal space between lines
• space-around — equal space around lines
• stretch — lines stretch to fill (default)

Difference:

• align-items — aligns items within each flex line
• align-content — aligns the flex lines themselves within the container

The gap property (previously grid-gap) adds consistent space between flex items without using margins. It works for both row and column gaps.

Auto-wrap to as many columns as fit using a fixed ideal size. No media queries needed:

flex-flow combines flex-direction and flex-wrap in one declaration:

For complex two-dimensional layouts with defined rows and columns, CSS Grid is more appropriate. Flexbox wrapping is best for one-dimensional content that happens to flow into multiple lines.

flex-wrap: wrap allows items to flow to new lines. align-content controls spacing between these lines in a multi-line container. Use gap for consistent spacing. Combine flex: 1 1 250px with flex-wrap for responsive card grids without media queries.