Flex Direction

Flex direction controls the main axis of your flex container — whether items flow horizontally or vertically, and in which direction. Tailwind provides four direction options.

Direction options

<!-- Row: items flow left to right (default) -->
<div class="flex flex-row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Row reversed: items flow right to left -->
<div class="flex flex-row-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Column: items flow top to bottom -->
<div class="flex flex-col">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Column reversed: items flow bottom to top -->
<div class="flex flex-col-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
    

Responsive direction changes

A common pattern is to stack items vertically on mobile and lay them out horizontally on desktop.

<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1 bg-blue-100 p-6">Sidebar</div>
  <div class="flex-1 bg-blue-200 p-6">Main Content</div>
</div>
    

Navigation bar pattern

Flex direction is key for building responsive navigation. Row on desktop, column on mobile.

<nav class="flex flex-col md:flex-row md:items-center md:justify-between p-4 bg-white shadow">
  <span class="text-xl font-bold">Logo</span>
  <div class="flex flex-col md:flex-row gap-4 mt-4 md:mt-0">
    <a href="#" class="text-gray-700 hover:text-blue-500">Home</a>
    <a href="#" class="text-gray-700 hover:text-blue-500">About</a>
    <a href="#" class="text-gray-700 hover:text-blue-500">Contact</a>
  </div>
</nav>