Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
MSDN Library
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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.

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

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.

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:
© 2015 Microsoft