Flex direction control in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the flex container arrange items in a row.

Tailwind

<div class="flex [1]">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Drag options to blanks, or click blank then click option'

Aflex-col

Bflex-wrap

Cflex-row

Ditems-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-col which arranges items vertically.

Using flex-wrap which controls wrapping, not direction.

The class flex-row arranges flex items horizontally in a row.

2fill in blank

medium

Complete the code to arrange flex items vertically.

Tailwind

<section class="flex [1] gap-4">
  <p>First</p>
  <p>Second</p>
  <p>Third</p>
</section>

Drag options to blanks, or click blank then click option'

Aitems-start

Bflex-col

Cjustify-center

Dflex-row

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-row which arranges items horizontally.

Using justify-center which aligns items but does not change direction.

The class flex-col arranges flex items vertically in a column.

3fill in blank

hard

Fix the error in the code to make flex items display in reverse row order.

Tailwind

<div class="flex [1]">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

Drag options to blanks, or click blank then click option'

Aitems-center

Bflex-col

Cflex-wrap

Dflex-row-reverse

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-col which arranges items vertically.

Using flex-wrap which controls wrapping, not direction.

The class flex-row-reverse arranges items in a row but reverses their order.

4fill in blank

hard

Fill both blanks to arrange flex items in a reversed column with spacing.

Tailwind

<nav class="flex [1] gap-6 [2]">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Drag options to blanks, or click blank then click option'

Aflex-col-reverse

Bitems-center

Cjustify-start

Dflex-row

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-row instead of flex-col-reverse.

Using justify-start which aligns items horizontally, not vertically.

flex-col-reverse arranges items vertically in reverse order, and items-center centers them horizontally.

5fill in blank

hard

Fill all three blanks to create a flex container with row direction, reversed order, and centered items.

Tailwind

<header class="flex [1] [2] [3]">
  <div>Logo</div>
  <div>Menu</div>
  <div>Profile</div>
</header>

Drag options to blanks, or click blank then click option'

Aflex-col

Bitems-center

Cflex-row-reverse

Djustify-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-col which arranges items vertically.

Mixing up items-center and justify-center roles.

flex-row-reverse arranges items in a reversed row, items-center centers items vertically, and justify-center centers items horizontally.

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