Flex direction control in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual order of items with flex-row-reverse?

Given this HTML and Tailwind CSS, what is the order of the boxes from left to right as seen in the browser?

<div class="flex flex-row-reverse gap-4">
  <div class="w-12 h-12 bg-red-500">1</div>
  <div class="w-12 h-12 bg-green-500">2</div>
  <div class="w-12 h-12 bg-blue-500">3</div>
</div>

Tailwind

<div class="flex flex-row-reverse gap-4">
  <div class="w-12 h-12 bg-red-500">1</div>
  <div class="w-12 h-12 bg-green-500">2</div>
  <div class="w-12 h-12 bg-blue-500">3</div>
</div>

A 2, 3, 1

B 1, 2, 3

C 3, 1, 2

D 3, 2, 1

💡 Hint

Remember that flex-row-reverse reverses the horizontal order of flex items.

The flex-row-reverse class makes the flex container arrange items horizontally but in reverse order. So the last item in the HTML (3) appears first on the left, then 2, then 1.

❓ selector

intermediate

Which Tailwind class sets vertical stacking of flex items?

You want your flex container to stack items vertically from top to bottom. Which Tailwind CSS class should you use?

A flex-row

B flex-col

C flex-row-reverse

D flex-col-reverse

💡 Hint

Think about the direction of the main axis in flexbox.

The flex-col class sets the flex direction to column, stacking items vertically from top to bottom.

🧠 Conceptual

advanced

What happens if you combine flex-col and flex-row on the same element?

Consider this HTML:

<div class="flex flex-col flex-row">...</div>

What is the effective flex direction applied by Tailwind CSS?

A flex direction is row because the last class overrides the previous

B flex direction is row-reverse by default

C flex direction is a mix of row and column causing layout errors

D flex direction is column because the first class takes precedence

💡 Hint

Tailwind applies classes in the order they appear in the class attribute, with later classes overriding earlier ones.

When multiple conflicting classes are applied, the last one wins. Here, flex-row overrides flex-col, so the flex direction is row.

❓ layout

advanced

How does flex-col-reverse affect vertical stacking?

Given this HTML:

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

What is the vertical order of the items from top to bottom as seen in the browser?

Tailwind

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

A C, B, A

B A, B, C

C B, C, A

D C, A, B

💡 Hint

The -reverse suffix reverses the normal stacking order.

The flex-col-reverse class stacks items vertically but in reverse order, so the last item (C) appears at the top, then B, then A at the bottom.

❓ accessibility

expert

Which flex direction is best for screen readers to read content in natural order?

You have a navigation menu with items arranged using flexbox. For best accessibility and natural reading order by screen readers, which flex direction should you use?

A flex-col-reverse

B flex-row-reverse

C flex-row

D flex-col

💡 Hint

Screen readers read content in the order it appears in the HTML source.

Using flex-row keeps the visual order matching the HTML source order, which helps screen readers read content naturally. Reverse directions can confuse reading order.

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