flex-direction

The flex-direction property designates the direction in which the flexible items will flow.

Syntax

This property only has an effect on flexible items.

.container {
  display: flex;
  flex-direction: column-reverse;
}

Values

row
Default value. Items are displayed horizontally, as in a row.

row-reverse
Items are displayed horizontally, as in a row, but in reverse order.

column
Items are displayed vertically, as in a column.

column-reverse
Items are displayed vertically, as in a column, but in reverse order.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of flex-direction? Submit a codepen.io demo and we'll showcase it here ↴