CSS flex-flow Property
Example
Display elements of the flexbox in reverse order and wrap them if necessary:
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers following -webkit-, -ms-, or -moz- indicate the first version that supported the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| flex-flow | 29.0 <br>21.0 -webkit- | 11.0 <br>10.0 -ms- | 28.0 <br>18.0 -moz- | 9.0 <br>6.1 -webkit- | 17.0 |
Definition and Usage
The flex-flow property is a shorthand property for flex-direction and flex-wrap.
The flex-flow property is used to set or retrieve the arrangement of child elements in a flexbox container.
The flex-direction property specifies the direction of the flexible items.
The flex-wrap property specifies whether the flexible items should wrap or not.
Note: The flex-flow property has no effect if the element is not a flexbox container.
| Default value: | row nowrap |
|---|---|
| Inherited: | no |
| --- | --- |
| Animatable: | no. See animatable |
| --- | --- |
| Version: | CSS3 |
| --- | --- |
| JavaScript syntax: | object.style.flexFlow="column nowrap" Try it |
| --- | --- |
CSS Syntax
Property Values
| Value | Description |
|---|---|
| flex-direction | Possible values: <br> <br>row <br>row-reverse <br>column <br>column-reverse <br>initial <br>inherit Default value is "row". Specifies the direction of the flexible items. |
| flex-wrap | Possible values: <br> <br>nowrap <br>wrap <br>wrap-reverse <br>initial <br>inherit Default value is "nowrap". Specifies whether the flexible items should wrap or not. |
| initial | Sets this property to its default value. See initial |
| inherit | Inherits this property from its parent element. See inherit |
Related Articles
CSS Reference Manual: flex Property
CSS Reference Manual: flex-basis Property
CSS Reference Manual: flex-direction Property
CSS Reference Manual: flex-grow Property
CSS Reference Manual: flex-shrink Property
CSS Reference Manual: flex-wrap Property