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.

Note   As of Internet Explorer 11 the Microsoft vendor prefix ("-ms-") version of this property is no longer supported. Instead use the non-prefixed name flex-flow, which is preferred for better standards compliance and future compatibility.

This property is read/write.

IE11

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 Toflex containers
Mediavisual
Inheritedno
Initial Valuerow nowrap

Remarks

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.

The flex-flow shorthand applied to a flex container


#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

CSSStyleDeclaration
Flexible box layout (Windows)
flex-wrap
flex-direction

 

 

Show:
© 2014 Microsoft. All rights reserved.