The flex-flow
CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Constituent properties
This property is a shorthand for the following CSS properties:
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 definition
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 |
Formal syntax
<'flex-direction'> || <'flex-wrap'>
Examples
Setting column-reverse and 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; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout ModuleThe 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-flow
|
Chrome Full support 29 Full support 29 Full support 21 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge
Full support 12 |
Firefox Full support 28 Full support 28 Full support 49 Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Implemented with the vendor prefix: -webkit-
Disabled' From version 44: this feature is behind the |
IE
Full support 11 |
Opera Full support 12.1 Full support 12.1 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari Full support 9 Full support 9 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support 4.4 Full support 4.4 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android Full support 29 Full support 29 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Android Full support 28 Full support 28 Full support 49 Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Implemented with the vendor prefix: -webkit-
Disabled' From version 44: this feature is behind the |
Opera Android Full support 12.1 Full support 12.1 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari iOS Full support 9 Full support 9 Full support 7 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android Full support 2.0 Full support 2.0 Full support 1.5 Prefixed' Implemented with the vendor prefix: -webkit- |
Legend
- Full support
- Full support
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Ordering flex items
flex-flow by Mozilla Contributors is licensed under CC-BY-SA 2.5.