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.