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 |
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 29 21 -webkit- | Yes | 28 49 -webkit- | 11 | 12.1 15 -webkit- | 9 6.1 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | Yes | 28 49 -webkit- | 11 | 12.1 15 -webkit- | 9.2 7.1 -webkit- |
1. From version 44: this feature is behind the layout.css.prefixes.webkit
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Ordering flex items
Document Tags and Contributors
Tags:
Contributors to this page:
rachelandrew,
mfluehr,
fscholz,
zhuangyin,
ericwilligers,
Arty-chan,
erikadoyle,
Sebastianz,
jsx,
Jeremie,
hexalys,
SaschaNaz,
SJW,
kscarfone,
teoli,
Sheppy,
ethertank,
FredB,
scottrowe
Last updated by:
rachelandrew,