0
0
Tailwindmarkup~5 mins

Flex direction control in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Flex direction control helps arrange items in a row or column inside a container. It makes layouts easy and flexible.

When you want items to line up side by side horizontally.
When you want items stacked vertically one on top of another.
When you want to reverse the order of items in a row or column.
When you want to create responsive layouts that change direction on different screen sizes.
Syntax
Tailwind
flex-row
flex-row-reverse
flex-col
flex-col-reverse

Use flex-row to arrange items horizontally from left to right.

Use flex-col to arrange items vertically from top to bottom.

Examples
Items are arranged in a horizontal row from left to right.
Tailwind
<div class="flex flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
Items are stacked vertically from top to bottom.
Tailwind
<div class="flex flex-col">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
Items are arranged horizontally but in reverse order, from right to left.
Tailwind
<div class="flex flex-row-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
Items are stacked vertically but in reverse order, from bottom to top.
Tailwind
<div class="flex flex-col-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
Sample Program

This example shows four sections demonstrating each flex direction control class. Each section has colored boxes labeled Item 1, Item 2, and Item 3 arranged according to the flex direction.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Flex Direction Control Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <section>
    <h2 class="text-lg font-semibold mb-2">Flex Row (default left to right)</h2>
    <div class="flex flex-row gap-4 bg-gray-100 p-4 rounded">
      <div class="bg-blue-500 text-white p-2 rounded">Item 1</div>
      <div class="bg-blue-500 text-white p-2 rounded">Item 2</div>
      <div class="bg-blue-500 text-white p-2 rounded">Item 3</div>
    </div>
  </section>

  <section class="mt-6">
    <h2 class="text-lg font-semibold mb-2">Flex Column (top to bottom)</h2>
    <div class="flex flex-col gap-4 bg-gray-100 p-4 rounded w-32">
      <div class="bg-green-500 text-white p-2 rounded">Item 1</div>
      <div class="bg-green-500 text-white p-2 rounded">Item 2</div>
      <div class="bg-green-500 text-white p-2 rounded">Item 3</div>
    </div>
  </section>

  <section class="mt-6">
    <h2 class="text-lg font-semibold mb-2">Flex Row Reverse (right to left)</h2>
    <div class="flex flex-row-reverse gap-4 bg-gray-100 p-4 rounded">
      <div class="bg-red-500 text-white p-2 rounded">Item 1</div>
      <div class="bg-red-500 text-white p-2 rounded">Item 2</div>
      <div class="bg-red-500 text-white p-2 rounded">Item 3</div>
    </div>
  </section>

  <section class="mt-6">
    <h2 class="text-lg font-semibold mb-2">Flex Column Reverse (bottom to top)</h2>
    <div class="flex flex-col-reverse gap-4 bg-gray-100 p-4 rounded w-32">
      <div class="bg-purple-500 text-white p-2 rounded">Item 1</div>
      <div class="bg-purple-500 text-white p-2 rounded">Item 2</div>
      <div class="bg-purple-500 text-white p-2 rounded">Item 3</div>
    </div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Use gap-* classes to add space between flex items.

Flex direction works only if the container has flex class.

You can combine flex direction with responsive prefixes like md:flex-col to change layout on medium screens.

Summary

flex-row arranges items horizontally left to right.

flex-col stacks items vertically top to bottom.

Adding -reverse reverses the order of items.