It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Flex-Flow Property

Reading time 1 min
Published Aug 8, 2017
Updated Oct 15, 2019

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-flow with 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

Browser image
Chrome
29+
Browser image
Edge
12+
Browser image
Firefox
28+
Browser image
IE
11+
Browser image
Opera
12.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
29+
Browser image
Firefox
28+
Browser image
Opera
12.1+
Browser image
Safari
9+