Flex direction control in Tailwind

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>

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.

Practice

1. Which Tailwind class arranges flex items horizontally from left to right?

easy

A. flex-row-reverse

B. flex-col

C. flex-row

D. flex-col-reverse

Solution

1. Step 1: Understand flex direction basics

   flex-row arranges items horizontally from left to right.

2. Step 2: Compare with other classes

   flex-col stacks vertically, and -reverse variants reverse order.

3. Final Answer:

   flex-row -> Option C

4. Quick Check:

   Horizontal left to right = flex-row [OK]

Hint: Remember: row = horizontal, col = vertical [OK]

Common Mistakes:

• Confusing flex-row with flex-col
• Thinking reverse means horizontal direction
• Mixing up flex-col and flex-col-reverse

2. Which Tailwind class correctly reverses the vertical stacking order of flex items?

easy

A. flex-col-reverse

B. flex-row

C. flex-col

D. flex-row-reverse

Solution

1. Step 1: Identify vertical stacking classes

   flex-col stacks items vertically top to bottom.

2. Step 2: Apply reverse to vertical stacking

   flex-col-reverse reverses vertical order, stacking bottom to top.

3. Final Answer:

   flex-col-reverse -> Option A

4. Quick Check:

   Reverse vertical stack = flex-col-reverse [OK]

Hint: Reverse vertical = flex-col-reverse [OK]

Common Mistakes:

• Choosing flex-row-reverse for vertical reverse
• Selecting flex-col instead of reversed version
• Mixing horizontal and vertical classes

3. What is the visual order of items when using flex-row-reverse on a flex container with items A, B, C?

medium

A. A B C (left to right)

B. A B C (top to bottom)

C. C B A (top to bottom)

D. C B A (left to right)

Solution

1. Step 1: Understand flex-row-reverse direction

   flex-row-reverse arranges items horizontally but reverses order.

2. Step 2: Apply to items A, B, C

   Original order left to right is A B C; reversed is C B A left to right.

3. Final Answer:

   C B A (left to right) -> Option D

4. Quick Check:

   flex-row-reverse reverses horizontal order [OK]

Hint: Reverse order flips item sequence visually [OK]

Common Mistakes:

• Assuming reverse changes vertical stacking
• Confusing left-to-right with top-to-bottom
• Ignoring the reverse effect on order

4. Identify the error in this Tailwind usage:

<div class="flex flex-col-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

What will be the visual order of items?

medium

A. Item 3, Item 2, Item 1 (top to bottom)

B. Item 1, Item 2, Item 3 (top to bottom)

C. Item 3, Item 2, Item 1 (left to right)

D. Item 1, Item 2, Item 3 (left to right)

Solution

1. Step 1: Analyze flex-col-reverse effect

   flex-col-reverse stacks items vertically but reverses order from bottom to top.

2. Step 2: Determine visual order of items

   Original order top to bottom is Item 1, 2, 3; reversed is Item 3, 2, 1 top to bottom.

3. Final Answer:

   Item 3, Item 2, Item 1 (top to bottom) -> Option A

4. Quick Check:

   flex-col-reverse reverses vertical order [OK]

Hint: Reverse vertical means last item appears first [OK]

Common Mistakes:

• Thinking reverse affects horizontal order
• Assuming order stays original
• Confusing flex-col with flex-row

5. You want a flex container that stacks items vertically but shows the last item at the top and the first item at the bottom. Which Tailwind class should you use?

hard

A. flex-col

B. flex-col-reverse

C. flex-row

D. flex-row-reverse

Solution

1. Step 1: Understand vertical stacking requirement

   Stacking vertically means using flex-col or its reverse.

2. Step 2: Reverse order to show last item first

   To show last item at top, use flex-col-reverse which reverses vertical order.

3. Final Answer:

   flex-col-reverse -> Option B

4. Quick Check:

   Vertical stack reversed = flex-col-reverse [OK]

Hint: Vertical reverse stack = flex-col-reverse [OK]

Common Mistakes:

• Choosing flex-row or flex-row-reverse for vertical stack
• Using flex-col without reverse
• Confusing horizontal and vertical directions