CSS flex-flow property
- previous page flex-direction
- next page flex-grow
Course recommendation:
Definition and usage
The flex-flow property is a shorthand property for the following properties:Note:
If the element is not a flexible item, the flex property is invalid.
See also:CSS Tutorial:
flex-shrink propertyCSS Flexible Box
flex-shrink propertyflex property
flex-shrink propertyflex-direction property
flex-shrink propertyflex-basis property
flex-shrink propertyflex-grow property
flex-shrink propertyCSS Reference Manual:
flex-wrap propertyHTML DOM Reference Manual:
flexFlow property
Example
Display flexible items in reverse order and wrap when necessary: div { display: flex; flex-flow: row-reverse wrap;
Try it yourself
CSS syntax
flex-flow: flex-direction flex-wrap|initial|inherit;
Attribute value | Value |
---|---|
flex-direction |
flex-wrap
column-reverse The default value is "row". |
Specifies the direction of the flexible items. |
flex-wrap
wrap-reverse The default value is "nowrap". |
Sets this property to its default value. See also | Specifies whether the flexible item should wrap. Sets this property to its default value. See alsoAnimation-related properties |
Inherits this property from its parent element. See also | initial Inherits this property from its parent element. See alsoAnimation-related properties |
inherit
Technical details | Default value: |
---|---|
row nowrap | Inheritance: |
No | Animation production:Not supported. See also:Animation-related properties |
. | Version: |
CSS3 | JavaScript syntax: |
object.style.flexFlow="column nowrap"
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
- previous page flex-direction
- next page flex-grow