CSS flex-direction Property

CSS flex-direction Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The flex-direction property determines the orientation and primary flow of flex items inside a flex container by establishing the main axis and the cross axis. It tells the container whether items should be laid out along a horizontal or vertical line and whether that line’s order runs in the forward or reverse direction; this choice is fundamental because many other layout behaviors are defined relative to the main and cross axes rather than absolute horizontal/vertical directions. Because it defines the axes, it changes how space distribution, alignment, and stretching are interpreted for each item.

This property only applies to elements that are flex containers, so its effect depends on the element being set up as a flex context via display. Once a main axis is established, properties that distribute free space or align items interpret their roles in relation to that axis: for example, the property used to distribute items along the main axis is handled by justify-content, while the property that aligns items on the cross axis is align-items. Changing the main axis with flex-direction therefore changes which physical dimension each of those properties affects.

When a container can wrap onto multiple lines, the direction set here interacts with line-wrapping rules controlled by flex-wrap, and the way multiple lines are aligned relative to each other is governed by align-content. Additionally, item-level ordering and alignment semantics are interpreted along the chosen axes: the numeric ordering mechanism provided by order reorders items along the main axis, and per-item alignment via align-self targets the cross axis set by the container’s direction. In short, changing flex-direction subtly but broadly affects layout because it redefines which axis is “main” for many related flexbox behaviors.

Definition

Initial value: row
Applies to: Flex containers
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.flexDirection

Interactive Demo

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

Item 1

Item 2

Item 3

Syntax

flex-direction: row | row-reverse | column | column-reverse

Values

rowThe main axis is the same as the orientation of the text, by default, from left to right. If the dir value is specified as rtl, then the direction of the axis goes from right to left.
row-reverseIt looks like a row value, but the start and end points are swapped and the main axis is directed from right to left. If the dir value is specified as rtl , then the direction of the axis goes from left to right.
columnThe main axis is vertical and directed from top to bottom.
column-reverseThe main axis is vertical, but the position of the start and end points changes and the axis is directed from bottom to top.

Example

HTML

<div class="examples">

  <h2>flex-direction examples</h2>

  <div class="example">

    <p class="label">row</p>

    <div class="box row">

      <div class="item">1</div>

      <div class="item">2</div>

      <div class="item">3</div>

    </div>

  </div>

  <div class="example">

    <p class="label">row-reverse</p>

    <div class="box row-reverse">

      <div class="item">1</div>

      <div class="item">2</div>

      <div class="item">3</div>

    </div>

  </div>

  <div class="example">

    <p class="label">column</p>

    <div class="box column">

      <div class="item">1</div>

      <div class="item">2</div>

      <div class="item">3</div>

    </div>

  </div>

  <div class="example">

    <p class="label">column-reverse</p>

    <div class="box column-reverse">

      <div class="item">1</div>

      <div class="item">2</div>

      <div class="item">3</div>

    </div>

  </div>

</div>

CSS

/* Basic page styles */
* {
  box-sizing: border-box;
}
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 20px;
  background: #f7f7f8;
  color: #222;
}

.examples {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}

.example {
  background: #fff;
  border: 1px solid #e2e2e5;
  padding: 12px;
  border-radius: 8px;
}

.label {
  margin: 0 0 8px 0;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.box {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #fbfbfd;
  border-radius: 6px;
  min-height: 64px;
  align-items: center;
  justify-content: flex-start;
  border: 1px dashed #e9e9ee;
}

.box.row {
  flex-direction: row;
}

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

.box.column {
  flex-direction: column;
  align-items: stretch;
  min-height: 120px;
}

.box.column-reverse {
  flex-direction: column-reverse;
  align-items: stretch;
  min-height: 120px;
}

.item {
  background: linear-gradient(180deg, #ffffff, #f1f5ff);
  border: 1px solid #dfe7fa;
  padding: 10px 14px;
  border-radius: 6px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #1a3a8a;
}

.box.column .item,
.box.column-reverse .item {
  width: 100%;
  height: auto;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS flex-direction property. Hover over a browser icon to see the version that first introduced support for this CSS property.