CSS flex-direction Property

What You’ll Learn

The flex-direction property controls which way flex items flow inside a container — horizontally in a row or vertically in a column, including reversed directions.

Introduction

The flex-direction property in CSS is a crucial part of the Flexible Box Layout Module, commonly known as Flexbox. This property specifies the direction in which the flex container’s children (the flex items) are placed. It allows developers to control the flow of items in a container, making it easier to design responsive and flexible layouts.

Definition and Usage

Apply flex-direction on a flex container (an element with display: flex or display: inline-flex). Use row for horizontal toolbars and nav bars, column for stacked cards or mobile menus, and reverse values when you need the visual order flipped without changing HTML source order.

📝 Syntax

The syntax for the flex-direction property is as follows:

container {
  flex-direction: direction;
}

Here, direction can be one of the following values:

• row
• row-reverse
• column
• column-reverse

Basic Example

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

Default Value

The default value of the flex-direction property is row, which means the flex items are laid out in a horizontal direction, from left to right.

Syntax Rules

• Apply on the flex container, not on individual flex items.
• Requires display: flex or display: inline-flex on the same element.
• Changing direction swaps the main and cross axes for alignment properties.
• Reverse values flip visual order but keep the DOM source order for accessibility.
• The property is not inherited by child elements.

💎 Property Values

Main Axis vs Cross Axis

Examples Gallery

In this example, we’ll use the flex-direction property to arrange items in a row — plus column stacking, reversed row order, and a responsive layout that switches direction on mobile.

<style>
  .container {
    display: flex;
    flex-direction: row;
    background-color: lightgray;
  }
  .item {
    padding: 20px;
    background-color: steelblue;
    margin: 10px;
    color: white;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toolbar {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.75rem;
}

.cards {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

@media (max-width: 600px) {
  .cards {
    flex-direction: column;
  }
}

♿ Accessibility

• Reverse values change visual order, not tab order — keyboard focus still follows DOM order.
• Prefer logical source order — do not rely on row-reverse alone to fix confusing navigation sequences.
• Use semantic HTML — wrap nav links in <nav> regardless of direction.
• Test with keyboard and screen readers when using reverse directions on interactive lists.
• Consider RTL languages — writing mode and direction affect how row vs row-reverse appear.

💡 Best Practices