CSSflex-direction Property
Example
Set the direction of the flexible items inside the <div> element in reverse order:
div{
display: flex;
flex-direction: row-reverse;
}
Try it Yourself »display: flex;
flex-direction: row-reverse;
}
Tip: More "Try it Yourself" examples below.
Definition and Usage
Theflex-direction property specifies the direction of the flexible items.
Note: If the element is not a flexible item, theflex-direction property has no effect.
| Default value: | row |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.flexDirection="column-reverse"Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| flex-direction | 29 | 11 | 28 | 9 | 17 |
CSS Syntax
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
Property Values
| Value | Description | Play it |
|---|---|---|
| row | Default value. The flexible items are displayed horizontally, as a row | Demo ❯ |
| row-reverse | Same as row, but in reverse order | Demo ❯ |
| column | The flexible items are displayed vertically, as a column | Demo ❯ |
| column-reverse | Same as column, but in reverse order | Demo ❯ |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
More Examples
Example
Usingflex-direction together withmedia queries to create a different layout for different screen sizes/devices:
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Try it Yourself »display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Related Pages
CSS Tutorial:CSS Flexible Box
CSS Reference:flex-flow property
CSS Reference:flex-wrap property
CSS Reference:flex property
CSS Reference:flex-grow property
CSS Reference:flex-shrink property
CSS Reference:flex-basis property
HTML DOM reference:flexDirection property
