Flex Wrap Property
Last updated: 2026-09-13
flex-wrap Flex Wrap Property
The flex-wrap property controls whether flex items are forced onto a single line or wrapped onto multiple lines. Its default value is nowrap, which keeps all items on one line even if they get compressed or overflow the container. Setting wrap lets the items flow onto the next line, which is very useful for responsive layouts and multi-column card arrangements.
| Category | |
|---|---|
| Initial Value | nowrap |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
flex-wrap: nowrap | wrap | wrap-reverse;⚙️ Values
| Value | Type | Description |
|---|---|---|
nowrap | wrap | wrap-reverse | Keyword | Whether flex items wrap |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-wrap | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Tip： wrap-reverse not only wraps lines but reverses their order: the first line appears at the bottom and the last line at the top, while the order of the items inside each line stays unchanged.
Important： align-content only takes effect when flex-wrap: wrap is set. It controls the spacing and alignment between the lines. On a single line, align-content does nothing.
❓ FAQ
QWhy do items still overflow the container with flex-wrap: wrap?
AItems with a fixed flex-basis or width may still overflow after wrapping because of the extra space added by gap, padding, margin or box-sizing. Use percentage widths, a calc() computation, or flex-basis: 0 combined with flex-grow so the items size themselves and share the container width evenly, avoiding the overflow entirely. Also check whether an ancestor sets min-width or box-sizing that prevents the items from shrinking below their content, since those constraints interact with flex-basis.
QHow do I choose between nowrap and wrap for responsive layouts?
Anowrap fits compact, single-line components such as navigation bars and action toolbars. wrap fits card lists, tag clouds and anything that should flow onto new lines as the screen narrows. Responsive layouts usually prefer wrap so the content wraps naturally, combined with a fixed flex-basis or a minmax value to control each item’s width for a steadier mobile experience. Keep in mind that min-width: auto can keep a single long word unbreakable, so add min-width: 0 or overflow-wrap to let the lines break.
QWhat is the difference between flex-wrap: wrap-reverse and flex-wrap: wrap?
ABoth allow wrapping; the difference is the direction of the wrapped lines. wrap lays the new lines along the positive main-axis direction, so with a row layout the new lines appear below. wrap-reverse flips the cross axis, so the first line starts at the bottom and the lines build upward, reversing the visual order. wrap-reverse is rarely needed and its interaction with align-content can be surprising, so use wrap for regular layouts.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Main Axis Direction
Defines the direction of the main axis in a flex layout
Flex Flow Shorthand
Shorthand for flex-direction and flex-wrap
