CSS flex-direction Property

Definition and Usage

The flex-direction property sets how flex items are placed in a flex container. It defines the main axis and whether items run in the normal or reversed direction along that axis.

Use it on an element with display: flex or inline-flex. The initial value is row. It is not inherited. Pair it with flex-wrap using the flex-flow shorthand when you need both.

CSS Syntax

In left-to-right pages, row runs left to right and column runs top to bottom.

Property Values

How to Use flex-direction

Set the container to flex, then choose the main-axis direction.

1. On the parent, set display: flex (or inline-flex).
2. Set flex-direction to row, column, or a reverse value.
3. Use justify-content along the main axis and align-items on the cross axis.
4. Add flex-wrap (or flex-flow) when items should wrap onto new lines.

Live Preview

Three labeled items. Change flex-direction and watch the main axis move.

CSS Examples

Each snippet shows only display: flex and flex-direction. Use Try It Yourself for a live editor.

<style>
  section {
    display: flex;
    flex-direction: row;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

<style>
  section {
    display: flex;
    flex-direction: column;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

<style>
  section {
    display: flex;
    flex-direction: row-reverse;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

Key Takeaways