flex-flow property
Shorthand property to specify both the flex-direction and flex-wrap properties of a flex container. These properties determine how elements are aligned within the flex container.
This property is read/write.
 |
Syntax
flex-flow: <'flex-direction'> || <'flex-wrap'>
Property values
One or both of the following flex direction and wrap values.
- <'flex-direction'>
-
Value of the flex-direction property.
row row-reverse column column-reverse See flex-direction for more info.
- <'flex-wrap'>
-
Value of the flex-wrap property.
nowrap wrap wrap-reverse See flex-wrap for more info.
CSS information
| Applies To | flex containers |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | row nowrap |
Remarks
As of Microsoft Edge, the "-ms-" prefixed version of this property is not supported.
As of Internet Explorer for Windows Phone 8.1 Update and Microsoft Edge, IE supports "-webkit-flex-flow" as an alias for this property.
The flex-flow property is a shorthand property. Separate properties can be used to specify each component, but in many cases it is more convenient to set them in one place using this shorthand property.
Examples
The example below shows the shorthand flex-flow property applied to the following flex container with four flex items, a 150 pixel width, and a grey border.
<div id="flexContainer"> <div class="green">1</div> <div class="blue">2</div> <div class="green">3</div> <div class="blue">4</div> </div>
In the CSS below, flex-flow is set to row and wrap-reverse. Row is a value of the flex-direction property, and sets the flex container's main axis to the same orientation as the inline axis of the current writing mode. Wrap-reverse is a value of the flex-wrap property, and the flex items are wrapped and displayed in successive parallel rows in reverse order.
#flexContainer {
width: 150px;
border: solid 1px #949494;
display: flex;
flex-flow: row wrap-reverse;
}
.green {
width: 50px;
background: #66CC33;
}
.blue {
width: 50px;
background: #0099FF;
}
See also