Skip to main content
WPFSharp Academy
Syllabus

CSS flex-direction: Row, Column, Reverse Explained with Examples

Badar KhalilUpdated October 1, 2026 4 min read
Share X Facebook LinkedIn WhatsApp

What is flex-direction in CSS Flexbox?

The CSS flex-direction property decides the direction of the main axis inside a flex container. In simple words, it tells the browser: should flex items be placed in a horizontal line (row) or a vertical stack (column), and in normal or reversed order? It is one of the first properties every developer learns in CSS Flexbox because every other alignment property (justify-content, align-items, align-content) depends on it.

Syntax

Code
.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

The default value is row. The property applies only to elements with display: flex or display: inline-flex.

Understanding Main Axis and Cross Axis

Flexbox always works on two axes. The main axis is the direction in which items are laid out. The cross axis is always perpendicular to the main axis. When you change flex-direction, you rotate both axes, and that is why justify-content (main axis) and align-items (cross axis) seem to swap behavior when you move from row to column.

All flex-direction values

ValueMain axisItem orderTypical use
rowLeft to right (in LTR languages)Same as HTML sourceNavbars, toolbars, button groups
row-reverseRight to leftReversed visuallyAlternate image-text sections, RTL-style layouts
columnTop to bottomSame as HTML sourceMobile menus, forms, card content, sidebars
column-reverseBottom to topReversed visuallyChat apps, activity logs, newest-first feeds

Detailed explanation of each value

1. flex-direction: row (default)

Items are placed side by side from the start of the line to the end. In English (LTR) the start is the left side. If you never write flex-direction, the browser uses row automatically.

2. flex-direction: row-reverse

Items are still in one horizontal line, but the starting point flips to the right. The first HTML item appears at the far right. Important: only the visual order changes, the DOM order stays the same.

3. flex-direction: column

The main axis becomes vertical, so items stack on top of each other. Container height now matters: if you want justify-content to work vertically, give the container a height or min-height.

4. flex-direction: column-reverse

Items stack from bottom to top. A very popular trick for chat UIs where the latest message stays near the bottom.

Direction and writing mode (RTL support)

The start and end of the main axis depend on the direction and writing-mode properties. In Arabic or Urdu pages (dir='rtl'), flex-direction: row automatically starts from the right. This makes Flexbox naturally friendly for multilingual websites.

Real-world use cases

  • Responsive navigation: row on desktop, column on mobile.
  • Card component: image on top and text below using column.
  • Login and signup forms: labels and inputs stacked in column.
  • Chat interface: column-reverse for latest message at bottom.
  • Pricing and feature sections: row-reverse to alternate image and text.

Common mistakes

  • Expecting justify-content to center vertically in a column without setting container height.
  • Using row-reverse or column-reverse and forgetting that keyboard Tab order still follows the HTML order, which can hurt accessibility (WCAG 1.3.2 Meaningful Sequence and 2.4.3 Focus Order).
  • Writing flex-direction on a child instead of on the flex container.
  • Forgetting display: flex, so the property has no effect.

Best practices

  • Use a mobile-first approach: start with column, switch to row on larger screens with a media query.
  • Prefer changing the HTML order over using reverse values when order carries meaning.
  • Combine with gap instead of margins for clean spacing.
  • Use min-width: 0 on flex children that contain long text to prevent overflow.

Tailwind CSS equivalents

flex-row, flex-row-reverse, flex-col, flex-col-reverse. Responsive example: flex flex-col md:flex-row.

CSS flexbox tutorial 2026, flex-direction column, flex-direction row-reverse, responsive flexbox layout, mobile-first CSS, flexbox vs CSS grid, Tailwind flex-col, CSS container queries with flexbox, modern CSS layout, flexbox cheat sheet.

Frequently Asked Questions

What is the default value of flex-direction?

The default value is row.

Does flex-direction change the HTML order?

No. It changes only the visual order. Screen readers and keyboard navigation still follow the DOM order.

What is the difference between column and column-reverse?

Column stacks items top to bottom, column-reverse stacks them bottom to top, starting from the bottom edge of the container.

Can I use flex-direction with inline-flex?

Yes. It works on both flex and inline-flex containers.

One-click copy

Neeche diye gaye code blocks par Copy button dabayein aur code seedha apne project mein paste karein. Cheat Sheet wala example sab values ek jagah deta hai.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself CSS
Output

Press Run to execute.

Exercise: Stack Items Vertically in ReverseHTML

Make the three boxes appear in a vertical stack where Box 3 is on top and Box 1 is at the bottom. Use only the flex-direction property.

Try it Yourself HTML
Output

Press Run to execute.

Show expected output 
Boxes are stacked vertically in the order Box 3, Box 2, Box 1 using flex-direction: column-reverse.

This is a self-check — compare your result with the expected output above.

Was this page helpful?