CSS Flex Direction

CSS Flex Direction

The CSS flex-direction property sets the direction of the main axis and determines the direction in which flex items are placed inside a flex container.

Flex items can be arranged as a row, a reversed row, a column, or a reversed column. Changing flex-direction also changes the orientation of the main and cross axes, which affects other Flexbox alignment properties.

flex-direction Values

The flex-direction property has four commonly used values.

The initial value is row.

flex-direction: row

The row value places flex items along the container's inline axis.

.flex-container {
  display: flex;
  flex-direction: row;
}

For English and other left-to-right horizontal writing modes, the items normally appear from left to right.

Item 1   Item 2   Item 3

Because row is the initial value, it does not need to be declared when the default direction is appropriate.

flex-direction: row-reverse

The row-reverse value uses the same axis as row but reverses the direction of the main axis.

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

In a typical left-to-right horizontal writing mode, the visual arrangement appears reversed.

Item 3   Item 2   Item 1

The HTML source order itself does not change. Only the visual direction of the flex layout changes.

flex-direction: column

The column value changes the main axis to follow the container's block axis.

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

In a typical horizontal writing mode, the items appear vertically from top to bottom.

Item 1
Item 2
Item 3

Once the main axis changes, properties that operate along the main axis, such as justify-content, follow the new direction.

flex-direction: column-reverse

The column-reverse value uses the same axis as column but reverses its main-start and main-end directions.

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

In a typical horizontal writing mode, the visual arrangement appears in reverse vertical order.

Item 3
Item 2
Item 1

As with row-reverse, the underlying HTML source order remains unchanged.

Main and Cross Axes

The flex-direction property determines the direction of the main axis. The cross axis always runs perpendicular to it.

Understanding these axes is important because Flexbox alignment properties refer to the main and cross axes rather than simply to horizontal and vertical directions.

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

In this example, justify-content operates along the column's main axis, while align-items operates across it.

Writing Direction

The meanings of row and column are based on the document's writing mode and direction rather than being permanently tied to left, right, top, or bottom.

For example, row follows the inline direction. In a left-to-right language it normally begins on the left, while in a right-to-left language it normally begins on the right.

This behavior helps Flexbox adapt to different languages and writing systems without requiring separate physical direction values.

Visual and Source Order

The reverse values can change the visual presentation of flex items without changing their order in the HTML source.

<div class="flex-container">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>

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

The elements remain First, Second, and Third in the document source even though their visual presentation is reversed.

Do not use reversed Flexbox directions solely to correct an illogical source order. A meaningful document order is important because visual order and the order used by some navigation and accessibility mechanisms can differ.

CSS Flex Direction Example

The following example displays all four flex-direction values. Open the example in the editor and change the values to see how each one changes the main axis and visual direction of the flex items.

.row {
  flex-direction: row;
}
.row-reverse {
  flex-direction: row-reverse;
}
.column {
  flex-direction: column;
}
.column-reverse {
  flex-direction: column-reverse;
}