Contents
Using CSS flex-flow
The CSS flex-flow property is actually a shorthand for flex-direction and flex-wrap properties. It sets the direction of flex items and whether they wrap in a single statement:
Example
p {
display: -webkit-flex; /* Safari */
-webkit-flex-flow: column wrap-reverse; /* Safari 6.1 and newer */
display: flex;
flex-flow: column wrap-reverse;
}Note: you can only use
flex-flowwith flex items placed in flex containers.
The Syntax for flex flow
Using the flex-flow CSS shorthand is very simple, as you can define either one or two values in any order:
flex-flow: direction wrap;
The available values for both properties will be explained in the following sections.
Values for flex-wrap
| Value | Definition |
|---|---|
nowrap |
The default value. All the flex items are in one line, even if they have to stick out of the borders |
wrap |
The flex items are in several lines. Their position depends on flex-direction |
wrap-reverse |
The flex items are in several lines. Their position is the opposite of the value in flex-direction |
Values for flex-direction
| Value | Definition |
|---|---|
row |
The default value. Sets the row of flex items in the same direction as text |
row-reverse |
Sets the items in the direction opposite to text |
column |
Same as row, but applies flexbox vertical align |
column-reverse |
Same as row-reverse, but applies flexbox vertical align |
Browser support
Chrome
29+
Edge
12+
Firefox
28+
IE
11+
Opera
12.1+
Safari
9+
Mobile browser support
Chrome
29+
Firefox
28+
Opera
12.1+
Safari
9+