CSS flex-flowProperty
Example
Cause the elements of the flex container to display in reverse order, and wrap lines when necessary:
flex-flow:row-reverse wrap;
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports this property.
The number immediately following -webkit-, -ms-, or -moz- is the first version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| flex-flow | 29.0 21.0 -webkit- |
11.0 10.0 -ms- |
28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Definition and Usage
The flex-flow property is a shorthand property for the flex-direction and flex-wrap properties.
The flex-flow property sets or retrieves the arrangement of child elements of a flex box model object.
The flex-direction property defines the direction of the flex items.
The flex-wrap property defines whether flex items wrap onto multiple lines or columns.
Note:If the element is not a flex container, the flex-flow property has no effect.
| Default value: | row nowrap |
|---|---|
| Inherited: | no |
| Animatable: | No. SeeAnimatable。 |
| version: | CSS3 |
| JavaScript Syntax: | object.style.flexFlow="column nowrap" Try it Yourself |
CSS Syntax
Property value
| Value | Description |
|---|---|
| flex-direction | Possible values: row row-reverse column column-reverse initial inherit Default value is "row". Specifies the direction of the flexible items. |
| flex-wrap | Possible values: nowrap wrap wrap-reverse initial inherit Default value is "nowrap". Specifies whether the flexible items should wrap or not. |
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Related Articles
CSS Reference:flex property
CSS Reference:flex-basis property
CSS Reference:flex-direction property
CSS Reference:flex-grow property
CSS Reference:flex-shrink property
CSS Reference:flex-wrap property
other extensions