flex-flow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

The flex-flow CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.

Try it

flex-flow: row wrap;

flex-flow: row-reverse nowrap;

flex-flow: column wrap-reverse;

flex-flow: column wrap;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>Item One</div>
    <div>Item Two</div>
    <div>Item Three</div>
    <div>Item Four</div>
    <div>Item Five</div>
    <div>Item Six</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 80%;
  max-height: 300px;
  display: flex;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  width: 60px;
  margin: 10px;
}

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;

Values

See flex-direction and flex-wrap for details on the values.

Formal definition

Initial valueas each of the properties of the shorthand:
Applies toflex containers
Inheritedno
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Formal syntax

flex-flow = 
  <'flex-direction'>  ||
  <'flex-wrap'>       

<flex-direction> = 
  row             |
  row-reverse     |
  column          |
  column-reverse  

<flex-wrap> = 
  nowrap        |
  wrap          |
  wrap-reverse

Examples

Setting column-reverse and wrap

In this example, the main-axis is the block direction with a reversed main-start and main-end. The flex items are allowed to wrap, creating new lines if needed.

css
element {
  flex-flow: column-reverse wrap;
}

Specifications

Specification
CSS Flexible Box Layout Module Level 1
# flex-flow-property

Browser compatibility

See also