Tailwind Flex direction

The tailwind flex direction utility class allows you to control the direction in which flex items are laid out within a flex container. It provides a set of classes that enable you to easily specify the flex direction, allowing you to create flexible and responsive layouts.

How to Set Tailwind Flex Direction

To set the tailwind flex direction of a flex container, you can use the flex class in combination with one of the following classes:

• flex-row: This sets the flex direction to horizontal, with flex items laid out in a row from left to right.

• flex-row-reverse: This sets the flex direction to horizontal, but in reverse order, with flex items laid out in a row from right to left.

• flex-col: This sets the flex direction to vertical, with flex items laid out in a column from top to bottom.

• flex-col-reverse: This sets the flex direction to vertical, but in reverse order, with flex items laid out in a column from bottom to top.

Tailwind Flex Row

Tailwind flex row class is used to set the flex direction to horizontal, with flex items laid out in a row from left to right.

<div class="flex flex-row">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

Tailwind Flex-Row-Reverse

Tailwind flex row reverse class is used to set the flex direction to horizontal, but in reverse order, with flex items laid out in a row from right to left.

<div class="flex flex-row-reverse">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

Tailwind Flex-Col

Tailwind flex col class is used to set the flex direction to vertical, with flex items laid out in a column from top to bottom

<div class="flex flex-col">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

Tailwind Flex-Col-Reverse

Tailwind flex col reverse class is used to set the flex direction to vertical, but in reverse order, with flex items laid out in a column from bottom to top

<div class="flex flex-col-reverse">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

That's it! You now have a good understanding of how to use the flex direction utility classes in Tailwind CSS to control the direction in which flex items are laid out within a flex container.

Responsive Behavior

All flex-related utilities support responsive variants:

<div class="flex flex-col sm:flex-row md:justify-between">
  <div>Item A</div>
  <div>Item B</div>
</div>

Preview

Start vertical (flex-col), then switch to horizontal layout (flex-row) on small screens and space items on medium screens.

Real UI Component Examples

🔹 Responsive Navbar

<nav class="flex items-center justify-between px-4 py-3">
  <span class="font-bold text-lg">Logo</span>
  <ul class="hidden md:flex gap-6">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Pricing</a></li>
  </ul>
</nav>

Preview

🔹 Card Layout

<div class="flex flex-col md:flex-row gap-6">
  <img src="image.jpg" class="w-full md:w-1/3 object-cover" />
  <div class="flex-1">
    <h2 class="text-xl font-semibold mb-2">Card Title</h2>
    <p class="text-gray-600">Description text...</p>
  </div>
</div>

Preview

Tassa Matins

Developer

✅ Best Practices for Devs & Designers

• Use flex for layout structures that need alignment, equal spacing, or flexible widths.

• Prefer flex over grid when you need row/column layout with simple item alignment.

• Use flex-1 for auto-sizing children within dynamic containers.

• Combine flex, gap-*, and items-center for clean UI alignment without manual margin hacks.

• Use basis-* + grow + shrink to fully control item sizing behavior.

♿ Accessibility Notes

• Flexbox doesn't directly affect accessibility, but improper order or alignment can impact screen reader flow.

• Be mindful of visual order vs. DOM order — flex-row-reverse may confuse screen readers.

• Use semantic HTML (<nav>, <main>, <section>) alongside flex layouts for proper structure.

Tailwind Flex Direction Class Table

✨ What's Next?

Check out this Tailwind classes

• Tailwind Flex

• Tailwind Justify Content

Windframe Tailwind blocks

footer