flex-wrap
Summary
The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction in which new lines are stacked.
Overview table
- Initial value
nowrap- Applies to
- flex containers
- Inherited
- No
- Media
- visual
- Computed value
- specified value
- Animatable
- No
- CSS Object Model Property
flexWrap
Syntax
flex-wrap: nowrapflex-wrap: wrapflex-wrap: wrap-reverse
Values
- nowrap
- The flex container is single-line. The cross-start direction is equivalent to either the start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.
- wrap
- The flex container is multi-line. The cross-start direction is equivalent to either the start or before/head direction of the current writing mode, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.
- wrap-reverse
- Same as wrap, except the cross-start and cross-end directions are swapped.
Examples
Displaying children in a non-wrapping row
.list {
display: flex;
flex-wrap: nowrap;
}
.list div {
flex: 1;
}
Displaying children in a row wrapping to the next line
.list {
display: flex;
flex-wrap: wrap;
}
.list div {
flex: 1;
}
Displaying children in a row wrapping to the previous line
.list {
display: flex;
flex-wrap: wrap-reverse;
}
.list div {
flex: 1;
}
Related specifications
- CSS Flexible Box Layout Module
- Candidate Recommendation