The flex-flow
CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.
The flex-flow
CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.
This property is a shorthand for the following CSS 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: revert; flex-flow: revert-layer; flex-flow: unset;
See flex-direction
and flex-wrap
for details on the values.
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | flex containers |
Inherited | no |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
flex-flow =
<'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; }
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
flex-flow |
2921 | 12 | 4928 | 11 | 1512.1 | 97 | ≤374.4 | 2925 | 4928 | 1412.1 | 97 | 2.01.5 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow