Gap between flex children in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add horizontal space between flex items using Tailwind CSS.

Tailwind

<div class="flex [1]">
  <div class="bg-blue-500 text-white p-4">Item 1</div>
  <div class="bg-green-500 text-white p-4">Item 2</div>
  <div class="bg-red-500 text-white p-4">Item 3</div>
</div>

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

Agap-4

Bp-4

Cm-4

Dspace-x-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using gap-4 which adds gap but works differently in flex context.

Using margin or padding classes on the container instead of spacing classes.

The space-x-4 class adds horizontal spacing between flex children.

2fill in blank

medium

Complete the code to add vertical space between flex items arranged in a column.

Tailwind

<div class="flex flex-col [1]">
  <div class="bg-purple-500 text-white p-3">First</div>
  <div class="bg-yellow-500 text-black p-3">Second</div>
  <div class="bg-pink-500 text-white p-3">Third</div>
</div>

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

Aspace-y-6

Bspace-x-6

Cgap-y-6

Dm-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using space-x-6 which adds horizontal space, not vertical.

Using margin or padding on the container instead of spacing classes.

The space-y-6 class adds vertical spacing between flex children arranged in a column.

3fill in blank

hard

Fix the error in the code to correctly add gap between flex children.

Tailwind

<div class="flex [1]">
  <div class="bg-gray-700 text-white p-2">Box A</div>
  <div class="bg-gray-500 text-white p-2">Box B</div>
</div>

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

Agap-4

Bspace-4

Cgap4

Dspace-gap-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using space-4 which is not a valid Tailwind class.

Missing the dash in gap4.

The correct Tailwind class to add gap between flex children is gap-4.

4fill in blank

hard

Fill both blanks to add horizontal space between flex children and center them vertically.

Tailwind

<div class="flex [1] [2]">
  <div class="bg-indigo-600 text-white p-3">Alpha</div>
  <div class="bg-indigo-400 text-white p-3">Beta</div>
</div>

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

Aspace-x-8

Bitems-center

Cjustify-center

Dgap-x-8

Attempts:

3 left

💡 Hint

Common Mistakes

Using justify-center which centers items horizontally, not vertically.

Using gap-x-8 which is not the space-x utility.

space-x-8 adds horizontal space between flex children. items-center centers them vertically.

5fill in blank

hard

Fill all three blanks to create a vertical flex container with vertical spacing and horizontally centered items.

Tailwind

<div class="flex flex-col [1] [2] [3]">
  <div class="bg-teal-600 text-white p-4">One</div>
  <div class="bg-teal-400 text-white p-4">Two</div>
  <div class="bg-teal-200 text-black p-4">Three</div>
</div>

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

Aspace-y-5

Bitems-center

Cjustify-start

Dgap-5

Attempts:

3 left

💡 Hint

Common Mistakes

Using gap-5 which adds gap but does not control alignment.

Using justify-center which centers items vertically instead of top aligning.

space-y-5 adds vertical spacing between items. items-center centers items horizontally. justify-start aligns items at the top vertically.