The flex-wrap property in CSS defines whether flex items should stay on a single line or wrap onto multiple lines when they overflow the flex container. It allows for more flexible and responsive layouts by controlling how items flow within a flex container.

Available Values of flex-wrap

1
nowrap (default): All flex items are placed on a single line, and they may overflow the container.
2
wrap: Flex items wrap onto multiple lines from top to bottom (in horizontal flex direction).
3
wrap-reverse: Flex items wrap onto multiple lines but in reverse order (from bottom to top).

Example: Using flex-wrap in a Flex Container

In this example, when the width of the flex container is too small to fit all items in one line, flex-wrap: wrap causes the extra items to move to the next line instead of overflowing.

Best Practices

1
Use flex-wrap: wrap for responsive designs where items should move to new lines on smaller screens.
2
Combine flex-wrap with align-content to control spacing between multiple lines.
3
Avoid using nowrap when items have fixed widths that can cause overflow issues.

Difficulty: 3/10

Topics: flex-wrap behavior, responsive layout, overflow handling

Scenario Questions

0-2 years experience

1
You're building a product grid on a mobile page, and the items are squeezing into a single row instead of wrapping. How would you fix it using flex-wrap?
2
If I set flex-wrap: wrap on a container but the items still don't wrap on a tablet, what’s the first thing you’d check?
3
What happens if you forget to set flex-wrap and the container has a fixed width with too many items?

2-5 years experience

1
Our product card component works fine on desktop, but on mobile, the text overflows and breaks the layout. How would you use flex-wrap to fix this without hardcoding heights?
2
A teammate says flex-wrap: wrap is causing inconsistent spacing between rows — how would you investigate and resolve this?
3
We have a dynamic list of tags that should wrap, but sometimes they overflow on smaller screens. What’s your approach to make this robust?

5-8 years experience

1
You're designing a responsive navigation bar that switches from horizontal to vertical on mobile — how do you use flex-wrap to avoid layout jank during resize, and what edge cases do you watch for?
2
In a component library, flex-wrap is used inconsistently across components. How would you standardize its usage to ensure predictable behavior across devices and content lengths?
3
A high-traffic page has a dynamic tag cloud that wraps poorly on low-end devices. How would you optimize the flex-wrap implementation for performance and rendering stability?

8+ years experience

1
We’re migrating a legacy UI from floats to flexbox, and flex-wrap is causing cascading layout breaks in 30+ components. How would you approach this migration without breaking production?
2
How would you design a cross-team CSS architecture guideline for flex-wrap usage that balances flexibility, accessibility, and performance across 50+ micro-frontends?
3
A global product uses flex-wrap in a multilingual UI where text length varies by 300% between languages. How do you ensure layout integrity and avoid content clipping at scale?

Follow-up Questions

❓What happens if you set flex-wrap: nowrap on a container with very wide items?
❓How would you debug a layout where items are wrapping when they shouldn't?
❓Why might flex-wrap: wrap-reverse cause unexpected visual behavior?