CSS flex-direction attribute

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 property is invalid.

See also:

CSS Tutorial:CSS Flexbox

CSS Reference Manual:flex Attribute

CSS Reference Manual:flex-basis Attribute

CSS Reference Manual:flex-flow Attribute

CSS Reference Manual:flex-grow Attribute

CSS Reference Manual:flex-shrink Attribute

CSS Reference Manual:flex-wrap Attribute

HTML DOM Reference Manual:flexDirection Property

Example

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

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

Try it yourself

CSS Syntax

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Attribute Value

Value Description
row Default Value. Display the flexible items horizontally as a row.
row-reverse Equivalent to rows but in the opposite direction.
column As columns, display the flexible items vertically.
column-reverse Equivalent to columns but in the opposite direction.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical Details

Default Value: row
Inheritance: No
Animation Creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.flexDirection="column-reverse"

More examples

Combine flex-direction and media queries to create different layouts for different screen sizes/devices:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Responsive layout - make a single column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Try it yourself

Browser Support

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

Numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0