Flex wrap behavior in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the flex container wrap its items.

Tailwind

<div class="flex [1]">
  <div class="w-24 h-24 bg-blue-500"></div>
  <div class="w-24 h-24 bg-red-500"></div>
  <div class="w-24 h-24 bg-green-500"></div>
</div>

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

Aflex-wrap

Bflex-nowrap

Cflex-row

Dflex-col

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-nowrap which prevents wrapping.

Using flex-row which controls direction, not wrapping.

The flex-wrap class makes the flex container wrap its items onto multiple lines if needed.

2fill in blank

medium

Complete the code to prevent flex items from wrapping.

Tailwind

<section class="flex [1] gap-4">
  <div class="w-20 h-20 bg-yellow-400"></div>
  <div class="w-20 h-20 bg-purple-400"></div>
  <div class="w-20 h-20 bg-pink-400"></div>
</section>

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

Aflex-nowrap

Bflex-wrap-reverse

Cflex-wrap

Dflex-col

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-wrap which allows wrapping.

Using flex-wrap-reverse which wraps but reverses the order.

The flex-nowrap class keeps all flex items on a single line without wrapping.

3fill in blank

hard

Fix the error in the flex container class to make items wrap in reverse order.

Tailwind

<div class="flex [1]">
  <div class="w-16 h-16 bg-indigo-600"></div>
  <div class="w-16 h-16 bg-teal-600"></div>
  <div class="w-16 h-16 bg-orange-600"></div>
</div>

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

Aflex-nowrap

Bflex-row

Cflex-wrap

Dflex-wrap-reverse

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-wrap which wraps but does not reverse.

Using flex-nowrap which prevents wrapping.

The flex-wrap-reverse class wraps flex items but reverses the wrap order.

4fill in blank

hard

Fill both blanks to create a flex container that wraps items and arranges them in a column.

Tailwind

<div class="flex [1] [2] gap-2">
  <div class="w-20 h-10 bg-gray-700"></div>
  <div class="w-20 h-10 bg-gray-500"></div>
  <div class="w-20 h-10 bg-gray-300"></div>
</div>

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

Aflex-wrap

Bflex-nowrap

Cflex-col

Dflex-row

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-nowrap which stops wrapping.

Using flex-row which arranges items horizontally.

Using flex-wrap allows wrapping, and flex-col arranges items vertically in a column.

5fill in blank

hard

Fill all three blanks to create a flex container that wraps items in reverse order and arranges them in a row.

Tailwind

<section class="flex [1] [2] [3] gap-3">
  <div class="w-16 h-16 bg-red-400"></div>
  <div class="w-16 h-16 bg-green-400"></div>
  <div class="w-16 h-16 bg-blue-400"></div>
</section>

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

Aflex-wrap

Bflex-wrap-reverse

Cflex-row

Dflex-col

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-nowrap which prevents wrapping.

Using flex-col which arranges items vertically.

flex-wrap-reverse wraps items in reverse order, and flex-row arranges items horizontally.