CSS flex-direction Property
Example
Set the direction of the flex items inside a <div> element to reverse order:
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-direction | 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-direction property specifies the direction of the flex items.
Note: If the element is not a flex container, the flex-direction property has no effect.
| Default value: | row |
|---|---|
| Inherited: | no |
| --- | --- |
| Animatable: | no. See animatable |
| --- | --- |
| Version: | CSS3 |
| --- | --- |
| JavaScript syntax: | object.style.flexDirection="column-reverse" Try it |
| --- | --- |
CSS Syntax
Property Values
| Value | Description | Example |
|---|---|---|
| row | Default value. Flex items are displayed horizontally, as a row. | Try it » |
| row-reverse | Same as row but in reverse order. | Try it » |
| column | Flex items are displayed vertically, as a column. | Try it » |
| column-reverse | Same as column but in reverse order. | Try it » |
| initial | Sets this property to its default value. See initial | Try it » |
| 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-flow Property
CSS Reference Manual: flex-grow Property
CSS Reference Manual: flex-shrink Property
CSS Reference Manual: flex-wrap Property