description & Usage
The flex-direction property determines the direction of items that are flexible.
Note: If the tag corresponding to an item is not flexible, the flex-direction property will lose its effect.
Informations
| # | Description |
|---|---|
| Default Value | row |
| Inherited | no |
| Animatable | no |
| Version | CSS3 |
| JavaScript syntax | object.style.flexDirection="column-reverse" |
Browser compatibility and Support
The numbers inserted in the browser fields indicate the version that supports the flex-direction property.
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| flex-direction |
Syntax
Values
| Values | Description |
|---|---|
| row | Items are displayed horizontally and with a default mode. |
| row-reverse | Items are placed in rows but in reverse order. |
| column | Items are displayed in columns. |
| column-reverse | Items are placed in columns but in reverse order. |
| initial | Adds this value to its default property. |
| inherit | It inherits this value from its parent tag. |
Related Pages
CSS Tutorial: CSS Flexible Box
CSS reference: flex-flow attribute
CSS reference: flex-wrap property
CSS reference: flex attribute
CSS reference: flex-grow attribute
CSS reference: flex-shrink property
CSS reference: flex-based attribute
HTML DOM reference: flexDirection attribute
