The flex-flow
CSS property is a shorthand property for flex-direction
and flex-wrap
individual properties.
/* 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;
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | flex containers |
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
See Using CSS flexible boxes for more properties and information.
Syntax
Values
See flex-direction
and flex-wrap
for details on the values.
Formal syntax
<'flex-direction'> || <'flex-wrap'>
Examples
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; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-flow' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 28.0[1] | 21.0-webkit 29.0 |
(Yes)-webkit (Yes) |
11 | 12.10 | 6.1-webkit |
Feature | Firefox Mobile (Gecko) | Android | Edge | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 28.0[1] | ? | (Yes)-webkit (Yes) |
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
.