Flex Direction

Controls the direction in which flex items are placed in the flex container. This is fundamental for responsive layouts where you might want elements to stack vertically on mobile but appear side-by-side on larger screens. The flex direction utility is often your starting point when building a flex-based layout and works alongside other flex utilities like justify-content and align-items.

Flexbox & Grid1 variant3 examples

Official Docs Open Playground

Basic usage:

<div class="flex flex-row gap-4">
  <div class="p-4 bg-blue-100">Item 1</div>
  <div class="p-4 bg-blue-200">Item 2</div>
  <div class="p-4 bg-blue-300">Item 3</div>
</div>

Examples

Default row direction (horizontal, left to right)

<div class="flex flex-row gap-4">
  <div class="p-4 bg-blue-100">Item 1</div>
  <div class="p-4 bg-blue-200">Item 2</div>
  <div class="p-4 bg-blue-300">Item 3</div>
</div>

Edit in playground

Column direction (vertical, top to bottom)

<div class="flex flex-col gap-4">
  <div class="p-4 bg-green-100">Item 1</div>
  <div class="p-4 bg-green-200">Item 2</div>
  <div class="p-4 bg-green-300">Item 3</div>
</div>

Edit in playground

Common responsive pattern - stacks vertically on small screens, horizontally on larger ones

<!-- Responsive layout: column on mobile, row on desktop -->
<div class="flex flex-col md:flex-row gap-6">
  <div class="w-full md:w-1/3 p-4 bg-gray-100 rounded-lg">
    <h2 class="font-bold text-lg mb-2">Sidebar</h2>
    <p>This will be on top on mobile, but to the left on desktop.</p>
  </div>
  <div class="w-full md:w-2/3 p-4 bg-white rounded-lg shadow">
    <h2 class="font-bold text-xl mb-4">Main Content</h2>
    <p>This will be below the sidebar on mobile, but to the right on desktop.</p>
  </div>
</div>

Edit in playground

Live Preview

Try the Flex Direction utility with different values

Open Interactive Playground

Variants

row: items arranged horizontally (default), row-reverse: items arranged horizontally in reverse order, col: items arranged vertically, col-reverse: items arranged vertically in reverse order

rowrow-reversecolcol-reverse