CSS flex-wrap property specifies whether the flex items should be wrapped onto multiple lines or not if enough space is not available.
By default, the flex-wrap property is set to nowrap, It means that the flex items are not wrapped and always stay in a single line(row). When enough space is not available, these flex items start shrinking to fit in this single line(row). See the example below:
Example:
.flex-container{
display: flex;
flex-wrap: nowrap;
}
If we use flex-wrap: wrap;, the flex items wrap up onto multiple lines if enough space is not available. See the example below:
Example:
.flex-container{
display: flex;
flex-wrap: wrap;
}
When we use flex-wrap: wrap-reverse;, the flex items are wrapped in reverse order if enough space is not available. See the example below:
Example:
.flex-container{
display: flex;
flex-wrap: wrap-reverse;
}
CSS Syntax
The flex-wrap property has the following syntax:
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
Property Values
The flex-wrap property accepts the following values:
| nowrap | The flex items are not wrapped and shrink to fit in a single line. This is the default value. |
| wrap | The flex items are wrapped up onto multiple lines if enough space is not available. |
| wrap-reverse | This is just the reverse of flex-wrap: wrap;. i.e Flex items wrap in reverse order. |
| initial | Sets the flex-wrap property to its default value(nowrap). |
| inherit | Inherits the flex-wrap property from the parent element. |
General Info
| Default Value | nowrap |
| Inherited | No |
| JavaScript Usage | element.style.flexWrap = “wrap” |
