Using flex-wrap to create responsive wrapped flex layouts in CSS3

Useful takeaway

Set flex-wrap: wrap on a flex container to allow its items to flow onto multiple lines when the container width is insufficient. This single declaration gives you responsive wrapping without needing custom media queries or JavaScript.

How flex-wrap works

Flexbox is a one-dimensional layout model. The main axis runs the direction declared by flex-direction (default row), and the cross axis is perpendicular. By default, if a flex item exceeds the container's main size, it overflows or gets clipped. flex-wrap changes that behavior.

• flex-wrap: nowrap (default) – items stay on a single line, possibly overflowing.
• flex-wrap: wrap – items wrap to the next line when they overflow, respecting the main-axis direction.
• flex-wrap: wrap-reverse – items wrap upward (or to the left) instead of downward (or to the right).

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.item {
  flex: 1 1 100px;
  /* flex-grow, flex-shrink, flex-basis */
}

In the example above, each .item has a minimum width of 100 px. When the container narrows below the combined width of the items, they automatically wrap to the next line rather than overflowing.

Common mistakes and limits

1. Missing vendor prefixes – Older browsers (e.g., IE 10, some Android versions) need -webkit-flex-wrap. Use Autoprefixer or check caniuse.com for support.

2. Mixing floats with flex – Floats and flexbox do not combine reliably; if you need floats, keep them separate or use display: block instead.

3. Unexpected sizing – Without an explicit flex-basis, the container may allocate space unpredictably. Providing a sensible flex-basis (as in the example) helps items wrap at the intended size.

4. align-items / justify-content confusion – These properties control alignment along the cross and main axes respectively. Misapplying them can make wrapped items appear misaligned.

Practical verification

Open the page in a modern browser (Chrome, Firefox, Edge, or Safari current versions). Use DevTools → Elements → Computed style and search for flex-wrap. Compare the rendered layout against the expected wrap behavior on caniuse.com. If the property appears but the layout does not wrap, check that flex-direction is not set to a value that locks wrapping (e.g., column with tight constraints).

Rollback considerations

Changing flex-wrap does not persist across page reloads; it is a visual change only. If you need to revert to a non-wrapping layout, simply remove or change the declaration back to flex-wrap: nowrap.