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.

Practice

1. What does the gap-x-4 class do when applied to a flex container in Tailwind CSS?

easy

A. Centers flex children horizontally

B. Adds vertical space between flex children

C. Removes all space between flex children

D. Adds horizontal space between flex children

Solution

1. Step 1: Understand the gap-x-4 utility

   The gap-x-4 class adds horizontal spacing between flex children, specifically on the x-axis.

2. Step 2: Differentiate from vertical gap

   Vertical spacing between flex children is controlled by gap-y-* classes, not gap-x-4.

3. Final Answer:

   Adds horizontal space between flex children -> Option D

4. Quick Check:

   Horizontal gap = gap-x-4 [OK]

Hint: Remember x = horizontal gap, y = vertical gap [OK]

Common Mistakes:

• Confusing gap-x with gap-y
• Thinking gap-x removes space
• Assuming gap-x centers items

2. Which Tailwind CSS class correctly adds a 1rem gap between flex children both horizontally and vertically?

easy

A. gap-4

B. gap-x-1

C. gap-y-4

D. gap-1

Solution

1. Step 1: Understand the gap-4 class

   The gap-4 class adds a uniform gap of 1rem (16px) both horizontally and vertically between flex children.

2. Step 2: Differentiate from axis-specific gaps

   gap-x-1 and gap-y-4 add gaps only on one axis, and gap-1 adds a smaller gap (0.25rem).

3. Final Answer:

   gap-4 -> Option A

4. Quick Check:

   Uniform gap = gap-4 [OK]

Hint: Use gap-* for both axes, gap-x-* or gap-y-* for one axis [OK]

Common Mistakes:

• Using gap-x or gap-y when both gaps are needed
• Confusing gap-1 with gap-4 size
• Assuming gap-1 equals 1rem

3. Given this HTML snippet:

<div class="flex gap-x-6">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

What visual effect will the gap-x-6 class produce?

medium

A. Adds 1.5rem horizontal space between each item

B. Adds 1.5rem vertical space between each item

C. Adds 6rem horizontal space between each item

D. No space added between items

Solution

1. Step 1: Interpret gap-x-6 size

   In Tailwind, gap-x-6 means horizontal gap of 1.5rem (24px) between flex children.

2. Step 2: Confirm axis and spacing

   Since the container is flex (default row), gap-x-6 adds horizontal space, not vertical.

3. Final Answer:

   Adds 1.5rem horizontal space between each item -> Option A

4. Quick Check:

   gap-x-6 = 1.5rem horizontal gap [OK]

Hint: Tailwind gap-6 equals 1.5rem spacing [OK]

Common Mistakes:

• Mixing horizontal and vertical gap
• Thinking gap-x-6 means 6rem
• Assuming no gap is added

4. You want to add a 2rem gap between flex children horizontally, but your code uses gap-x-8 and the gap looks smaller than expected. What is the likely mistake?

medium

A. Tailwind's gap-x-8 is 2rem, so no mistake

B. You forgot to add flex class to the container

C. You should use gap-8 instead of gap-x-8

D. The children have margin that overrides gap

Solution

1. Step 1: Check if container is flex

   The gap-x-8 class only works if the container is a flex or grid container. Without flex, gap won't apply.

2. Step 2: Confirm gap-x-8 size

   gap-x-8 equals 2rem horizontal gap, so the size is correct if flex is present.

3. Final Answer:

   You forgot to add flex class to the container -> Option B

4. Quick Check:

   gap-x-* needs flex container [OK]

Hint: Always add flex or grid for gap-x-* to work [OK]

Common Mistakes:

• Assuming gap works without flex/grid
• Confusing gap-x-8 size
• Ignoring margin conflicts

5. You have a flex container with 3 children. You want 1rem vertical gap and 2rem horizontal gap between them. Which Tailwind classes should you use?

hard

A. flex gap-4 gap-8

B. flex gap-x-4 gap-y-8

C. flex gap-x-8 gap-y-4

D. flex gap-8 gap-y-4

Solution

1. Step 1: Convert rem to Tailwind gap scale

   1rem = 4 (gap-4), 2rem = 8 (gap-8) in Tailwind spacing scale.

2. Step 2: Assign horizontal and vertical gaps

   Horizontal gap (x-axis) should be 2rem -> gap-x-8. Vertical gap (y-axis) should be 1rem -> gap-y-4.

3. Step 3: Verify class combination

   Using flex gap-x-8 gap-y-4 correctly sets horizontal and vertical gaps as required.

4. Final Answer:

   flex gap-x-8 gap-y-4 -> Option C

5. Quick Check:

   Horizontal 2rem = gap-x-8, Vertical 1rem = gap-y-4 [OK]

Hint: Use gap-x-* for horizontal and gap-y-* for vertical gaps [OK]

Common Mistakes:

• Mixing gap-x and gap-y values
• Using gap-* alone for different axis gaps
• Confusing Tailwind spacing scale