---
title: "Flex Direction"
slug: "flex-direction"
category: "glossary"
tags: ["glossary", "css", "flexbox", "flex-direction", "layout", "frontend"]
status: "stable"
last_updated: 2026-08-14
summary: "The flex-direction property sets the main axis of a flex container, controlling whether children flow as a row or column and whether the order is reversed."
related:
  [
    "[[glossary/css-flexbox]]",
    "[[glossary/grid-template]]",
    "[[glossary/box-model]]",
    "[[glossary/layout-shift]]",
    "[[frontend/css]]",
    "[[glossary/viewport]]",
  ]
---

## Overview

This page is the atomic definition. Full CSS layout guidance lives at [[frontend/css]]. `flex-direction` sets the main axis of a flex container (row or column, optionally reversed), which in turn determines how `justify-content` and `align-items` apply to its children.

## Definition

`flex-direction` defines the main axis of a flex container. Children (flex items) are placed along this axis. The cross axis is perpendicular to the main axis.

Four values:
- `row` (default): left to right in LTR writing modes; cross axis is top to bottom.
- `row-reverse`: right to left; cross axis unchanged.
- `column`: top to bottom; cross axis is left to right.
- `column-reverse`: bottom to top.

`flex-direction` interacts with `flex-wrap`, `justify-content` (aligns along main axis), and `align-items` (aligns along cross axis). Reversing direction only affects visual order; DOM order, tab order, and accessibility tree order remain unchanged, which can create keyboard navigation mismatches.

`writing-mode` affects physical direction: in vertical writing modes `row` flows top to bottom. Use logical flow properties (`block-start`, `inline-end`) when supporting vertical scripts.

## When it applies

Use `flex-direction: column` for card contents, form field groups, or nav items that stack vertically. Use `flex-direction: row` for toolbars, button groups, and horizontal nav items. Switch direction at breakpoints with media queries rather than using separate layout blocks. Prefer `flex-direction: column` on the outer shell to avoid horizontal scroll on small viewports.

Avoid `row-reverse` and `column-reverse` for content that users need to read or navigate by keyboard; the visual and DOM mismatch breaks assistive technology.

## Example

```css
.toolbar { display: flex; flex-direction: row; gap: 8px; align-items: center; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }

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

## Related concepts

- [[glossary/css-flexbox]] - the full flex model including alignment and wrapping.
- [[glossary/grid-template]] - grid is the better tool when both axes need control.
- [[glossary/box-model]] - flex containers suppress margin collapsing on their children.
- [[frontend/css]] - the CSS deep-dive.
- [[glossary/viewport]] - responsive flex-direction changes depend on viewport width.

## Citing this term

> See [[glossary/flex-direction|Flex Direction]] (llmbestpractices.com/glossary/flex-direction).

## Related

- [[glossary/css-flexbox]]
- [[glossary/grid-template]]
- [[glossary/box-model]]
- [[frontend/css]]
- [[glossary/viewport]]