# flex-direction property

The `flex-direction` property sets a direction of the main and cross axis or, in other words, arranges elements in a row or column.

It applies to the parent element for flex blocks. It is included in the shorthand `flex-flow` property.

## Syntax

`selector { flex-direction: row | row-reverse | column | column-reverse; }`

## Values

Value | Description
--- | ---
`row` | The main axis is directed from left to right. Elements are arranged in a row, by default pressed to the left edge, their numbering is in the usual order - from left to right.
`row-reverse` | The main axis is directed from right to left. Elements are arranged in a row, by default pressed to the right edge, their numbering is in reverse order - from right to left.
`column` | The main axis is directed from top to bottom. The elements are arranged in a column, pressed to the top by default, their numbering is in the usual order - top to bottom.
`column-reverse` | The main axis is directed from bottom to top. The elements are arranged in a column, pressed to the bottom by default, their numbering is in reverse order - bottom to top.

Default value: `row`.

## Example

Elements are arranged in a row, by default pressed to the left edge, their numbering is in the usual order - from left to right:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { flex-direction: row; display: flex; } #parent > div { border: 1px solid #696989; width: 100px; height: 50px; }`

:

## Example . The row-reverse value

Elements are arranged in a row, by default pressed to the right edge, their numbering is in reverse order - from right to left:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { flex-direction: row-reverse; display: flex; } #parent > div { border: 1px solid #696989; width: 100px; height: 50px; }`

:

## Example . The column value

The elements are arranged in a column, pressed to the top by default, their numbering is in the usual order - top to bottom:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { flex-direction: column; display: flex; } #parent > div { border: 1px solid #696989; width: 100px; height: 50px; }`

:

## Example . The column-reverse value

The elements are arranged in a column, pressed to the bottom by default, their numbering is in reverse order - bottom to top:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { flex-direction: column-reverse; display: flex; } #parent > div { border: 1px solid #696989; width: 100px; height: 50px; }`

:

## See also

- the `justify-content` property
  that sets an alignment along the main axis
- the `align-items` property
  that sets an alignment along the cross axis
- the `flex-wrap` property
  that sets the multi-line nature of flex blocks
- the `flex-flow` property
  a shorthand for flex-direction and flex-wrap
- the `order` property
  that specifies an order of flex blocks
- the `align-self` property
  that specifies an alignment of a single block
- the `flex-basis` property
  that sets a size of a certain flex block
- the `flex-grow` property
  that sets a greediness of flex blocks
- the `flex-shrink` property
  that sets a shrink of flex blocks
- the `flex` property
  a shorthand for flex-grow, flex-shrink and flex-basis

← →
↑
en ru