CSS - flex-flow

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

Example

element { 
  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
  flex-flow: column-reverse wrap;            
}

Syntax  

/* 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: unset;

Values

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

Formal syntax

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

Description  

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

Initial valueas each of the properties of the shorthand:
Applies toflex containers
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animatableno
Canonical orderorder of appearance in the formal grammar of the values

See Using CSS flexible boxes for more properties and information.

Browser Compatibility  

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 28.0[1] 21.0-webkit
29.0
11 12.10 6.1-webkit
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support 28.0[1] ? 11 12.10 7.1-webkit

[1] In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

See Also  

Specifications  

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-flow' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/flex-flow