The flex-flow CSS property is a shorthand property for flex-direction and flex-wrap 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;
See flex-direction and flex-wrap for details on the values.
<'flex-direction'> || <'flex-wrap'>
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;
}
| Specification | Status | Comment |
|---|---|---|
| CSS Flexible Box Layout Module The definition of 'flex-flow' in that specification. | Candidate Recommendation | Initial definition |
| 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 |
| Desktop | ||||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
| Basic support | 29
|
12 | 28
|
11 | 12.1
|
9
|
| Mobile | |||||||
|---|---|---|---|---|---|---|---|
| Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | 4.4
|
29
|
Yes | 28
|
12.1
|
9.2
|
? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow