Tailwind Flex Direction

What Is flex-direction?

flex-direction sets the main axis along which flex items are laid out. Tailwind provides four values: flex-row (default, left to right), flex-row-reverse, flex-col (top to bottom), and flex-col-reverse.

Changing the direction also flips which axis justify-* and items-* apply to: in flex-row, justify-* controls horizontal alignment; in flex-col, justify-* controls vertical alignment instead.

<div class="flex flex-col gap-2 md:flex-row md:gap-6">
  <div class="rounded bg-slate-100 p-4">Panel A</div>
  <div class="rounded bg-slate-100 p-4">Panel B</div>
</div>

Panels stack vertically on mobile with flex-col, then switch to a horizontal row at the md breakpoint.

Flex Direction Syntax

class="flex-row | flex-row-reverse | flex-col | flex-col-reverse"

• flex-row is the default; items lay out left to right.
• flex-row-reverse lays items out right to left, visually reversing their order.
• flex-col stacks items top to bottom.
• flex-col-reverse stacks items bottom to top.

Flex Direction Cheatsheet

All four direction values and how they affect the main axis.

Switching Direction Responsively

A very common Tailwind pattern stacks content vertically on mobile (flex-col) and switches to a horizontal row on larger screens (md:flex-row), giving mobile users a natural top-to-bottom reading order.

<div class="flex flex-col md:flex-row">
  <img class="w-full md:w-1/3" src="/product.jpg" alt="Product" />
  <div class="p-6">
    <h3 class="text-xl font-bold">Product Name</h3>
    <p class="text-slate-600">Product description text.</p>
  </div>
</div>

Reversing Visual Order Without Changing HTML

flex-row-reverse and flex-col-reverse change the visual order of items without touching the HTML source order, useful for alternating image/text layouts or maintaining a specific DOM order for accessibility while changing the visual presentation.

<div class="flex flex-col-reverse md:flex-row-reverse">
  <div class="p-6">Text content, appears first in HTML</div>
  <img class="w-full md:w-1/2" src="/hero.jpg" alt="" />
</div>

The image is written after the text in HTML but visually appears first because of the reverse direction.

How Direction Changes justify and items

Because justify-* always targets the main axis and items-* always targets the cross axis, switching from flex-row to flex-col swaps which physical direction each utility affects.

Common Mistakes

• Expecting justify-center to always center horizontally, without accounting for flex-col swapping the main axis to vertical.
• Using flex-row-reverse purely for visual order when the underlying HTML order actually matters for accessibility, and not verifying screen reader order still makes sense.
• Forgetting responsive prefixes, causing a flex-col mobile layout to stay stacked awkwardly on desktop.
• Mixing up flex-col-reverse with simply reordering elements in the DOM, which produces a different accessibility tree order.
• Not testing both breakpoints when using a responsive direction switch pattern.

Key Takeaways

• flex-direction utilities set whether the main axis is horizontal or vertical, and in which order.
• flex-row/flex-col combined with responsive prefixes create adaptive stacked-to-horizontal layouts.
• Reverse variants change visual order without altering the underlying HTML/DOM order.
• justify-* always targets the main axis; items-* always targets the cross axis, both shift meaning with direction.
• Always verify that visual reordering still makes sense for keyboard and screen reader users.