CSS flex-direction Property

Example

Set the direction of the flexible items inside the <div> element in reverse order:

div {
  display: flex;
  flex-direction: row-reverse;
}

Definition and Usage

The flex-direction property specifies the direction of the flexible items.

Note: If the element is not a flexible item, the flex-direction property has no effect.

Default value:	row
Inherited:	no
Animatable:	no.
Version:	CSS3
JavaScript syntax:	object.style.flexDirection="column-reverse"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which flex-direction is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
flex-direction	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

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
row-reverse	Same as row, but in reverse order
column	The flexible items are displayed vertically, as a column
column-reverse	Same as column, but in reverse order
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

Using flex-direction together with media 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;
  }
}