CSS flex-flow Property

Make the flexible items display in reverse order, and wrap if necessary:

div {
display: -webkit-flex; /* Safari */
-webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
display: flex;
flex-flow: row-reverse wrap;
}

Try it Yourself »


Definition and Usage

The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.

The flex-direction property specifies the direction of the flexible items.

The flex-wrap property specifies whether the flexible items should wrap or not.

Note: If the elements are not flexible items, the flex-flow property has no effect.

Default value: row nowrap
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.flexFlow=”column nowrap” Try it
CSS Syntax
flex-flow: flex-direction flex-wrap|initial|inherit;
Property Values
Value Description
flex-direction Possible values:

row
row-reverse
column
column-reverse
initial
inheritDefault value is “row”.

Specifying the direction of the flexible items

flex-wrap Possible values:

nowrap
wrap
wrap-reverse
initial
inheritDefault value is “nowrap”.

Specifying whether the flexible items should wrap or not

initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit