flex-wrap
Specifies whether flex items wrap onto multiple lines when they don't fit on one line inside the flex container.
Sample Code
/* No wrapping (initial value) */
.container { display: flex; flex-wrap: nowrap;}
/* Wrap to next line */
.container-wrap { display: flex; flex-wrap: wrap;}
/* Wrap in reverse direction */
.container-reverse { display: flex; flex-wrap: wrap-reverse;}
Available Values
| Value | Description |
|---|---|
| nowrap | Lays all items on one line without wrapping. This is the initial value. Items shrink if they don't fit. |
| wrap | Wraps items onto the next line when they exceed the container's width. |
| wrap-reverse | Wraps like 'wrap', but in the reverse cross-axis direction. |
Specification
| Item | Details |
|---|---|
| Initial value | nowrap |
| Applies to | Flex containers (elements with 'display: flex' or 'display: inline-flex') |
| Inherited | No |
| Animation | No (discrete) |
Browser Compatibility
Chrome29+ ○
28 △27 △26 △25 △24 △23 △22 △21 △20 or earlier ×
Firefox28+ ○
27 or earlier ×
Safari9+ ○8 △
7 △6 or earlier ×
Edge12+ ○
IE11 ○10 ×9 ×
8 ×7 ×
6 ×
Opera16+ ○15 △
14 or earlier ×
iOS Safari9+ ○8 △7 △6 or earlier ×
Android Browser4.4+ ○3 or earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○Overview
'flex-wrap' is a property applied to flex containers that controls wrapping behavior when child elements (flex items) overflow along the main axis. With the default value 'nowrap', items are placed on one line; if they don't fit, items are shrunk.
nowrap (default)
Places all items on one line. If the total item width exceeds the container, items are shrunk based on their 'flex-shrink' values. If they still overflow, you can combine this with the 'overflow' property to handle the overflow.
wrap
When items don't fit on one line, they wrap onto the next line in the cross-axis direction. With 'flex-direction: row', new lines are created downward; with 'flex-direction: column', they are created to the right. This is the most commonly used value for responsive layouts.
wrap-reverse
Wraps like 'wrap', but in the opposite direction. With 'flex-direction: row', wrapping goes upward. Not used as often, but useful when you need items to stack from bottom to top in certain layouts.
Pattern 1: Responsive Card Layout
/* Lay cards horizontally and wrap when they don't fit */
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 0 1 300px; /* min 300px, can shrink, no grow */
}
Pattern 2: Tag List
/* Lay tags horizontally and let them wrap naturally */
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
padding: 4px 12px;
border-radius: 16px;
background: #eee;
white-space: nowrap;
}
Handling Overflow with 'nowrap'
When items overflow the container with 'nowrap', you can use 'overflow: hidden' or 'overflow: auto' to hide or scroll overflowing content. Also, setting 'min-width: 0' on items can resolve text overflow issues.
/* Prevent overflow */
.container {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
}
.item {
min-width: 0; /* prevent text overflow */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Relationship with 'align-content'
When 'flex-wrap: wrap' causes multiple lines, the 'align-content' property controls the spacing between those lines. 'align-content' has no effect with 'nowrap' (single line).
Related Properties
| Property | Description |
|---|---|
| flex-direction | Specifies the main axis direction. The wrap direction for 'flex-wrap' is the cross-axis direction relative to the main axis. |
| flex-flow | Shorthand for 'flex-direction' and 'flex-wrap'. |
| align-content | Controls the alignment of multiple lines. Only has an effect when wrapping occurs with 'wrap'. |
| flex-shrink | Controls how much each item shrinks when fitting on one line with 'nowrap'. |
If you find any errors or copyright issues, please contact us.
シェアする