The flex-wrap Property
The flex-wrap
property specifies whether the flex items should wrap or not.
The examples below have 12 flex items, to better demonstrate the flex-wrap
property.
The wrap
value specifies that the flex items will wrap if necessary
.flex-container {
display: flex;
flex-wrap: wrap;
}
The nowrap
value specifies that the flex items will not wrap (this is default)
.flex-container {
display: flex;
flex-wrap: nowrap;
}
The wrap-reverse
value specifies that the flexible items will wrap if necessary, in reverse order
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
The flex-flow
property is a shorthand property for setting both the flex-direction
and flex-wrap
properties
.flex-container {
display: flex;
flex-flow: row wrap;
}