Explaining CSS flex wrapping
The CSS flex-wrap property specifies the placement of flex items in the lines of the flex container:
Example
#first {
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: nowrap; /* Safari 6.1+ */
display: flex;
flex-wrap: nowrap;
}
#second {
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;
flex-wrap: wrap;
}Syntax for flex-wrap
To use the flex-wrap property, you need to define one of the three available values:
flex wrap: value;
See all the values explained in the table below.
| Value | Syntax | Meaning |
|---|---|---|
nowrap |
flex-wrap: nowrap; |
The default value. All the items are placed in one value, even if they don't fit within the container borders |
wrap |
flex-wrap: wrap; |
The items are wrapped in several lines to fit within the container borders. The direction depends on the value of flex-direction |
wrap-reverse |
flex-wrap: wrap-reserve; |
The items are wrapped in several lines to fit within the container borders. The direction is opposite to the value of flex-direction |
Browser support
Chrome
29+
Edge
12+
Firefox
28+
IE
11+
Opera
17+
Safari
9+
Mobile browser support
Chrome
29+
Firefox
52+
Opera
18+
Safari
9+