Flex direction control in Tailwind - Mini Project: Build & Apply

Flex Direction Control with Tailwind CSS

📖 Scenario: You are building a simple webpage section that displays three colored boxes. You want to control how these boxes are arranged using flexbox direction.

🎯 Goal: Create a flex container with three colored boxes inside. Use Tailwind CSS classes to control the flex direction so the boxes appear in a row or column as specified.

📋 What You'll Learn

Use a <section> element as the flex container

Add three <div> boxes inside the container with background colors red, green, and blue

Use Tailwind CSS classes to set the container as a flex container

Control the flex direction using Tailwind classes

Make sure the boxes have visible size and spacing

💡 Why This Matters

🌍 Real World

Flexbox is used everywhere in web design to arrange elements horizontally or vertically. Controlling flex direction helps create flexible layouts.

💼 Career

Knowing how to use Tailwind CSS flex utilities and control layout direction is a key skill for frontend developers building responsive websites.

1

Create the flex container and boxes

Create a <section> element with the class flex. Inside it, add three <div> elements with classes bg-red-500, bg-green-500, and bg-blue-500. Also add h-24 and w-24 classes to each box for size.

Tailwind

Hint

Use the flex class on the <section> to make it a flex container. Add three <div> boxes with the exact background color and size classes.

2

Add a variable for flex direction

Create a variable called flexDirection and set it to the string flex-row.

Tailwind

  
  
  


// Create a variable called flexDirection and set it to 'flex-row'
// Your code here

Hint

Use const flexDirection = 'flex-row'; to create the variable.

3

Apply the flex direction variable to the container

Add the variable flexDirection as a class to the <section> element so it controls the flex direction. Use template literals to combine the classes.

Tailwind

// Update the  element to include the flexDirection variable in its class attribute
// Your code here

Hint

Use container.className = `flex ${flexDirection}`; to add the flex direction class dynamically.

4

Change flex direction to column

Change the value of the variable flexDirection to flex-col to make the boxes stack vertically.

Tailwind

// Change the flexDirection variable to 'flex-col'
// Your code here

Hint

Simply set const flexDirection = 'flex-col'; to stack boxes vertically.

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