Gap between flex children in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the Tailwind class gap-4 do in a flex container?

In a flex container, what is the effect of adding the class gap-4 to the parent element?

Tailwind

<div class="flex gap-4">
  <div class="bg-blue-500 p-4">Box 1</div>
  <div class="bg-red-500 p-4">Box 2</div>
  <div class="bg-green-500 p-4">Box 3</div>
</div>

A It adds a 1rem space between each flex child horizontally and vertically.

B It adds a 4px space between each flex child only horizontally.

C It adds a 4rem space between the flex container and its children.

D It adds padding inside each flex child of 4 units.

💡 Hint

Think about how Tailwind's spacing scale works and what 'gap' controls in flexbox.

The gap-4 class in Tailwind adds a gap of 1rem (16px) between flex children both horizontally and vertically. This spacing is consistent and does not add padding inside the children or margin outside the container.

📝 Syntax

intermediate

Which Tailwind class correctly adds horizontal gap only between flex children?

You want to add space only between flex children horizontally, not vertically. Which Tailwind class should you use?

Tailwind

<div class="flex ???">
  <div class="bg-yellow-400 p-3">Item 1</div>
  <div class="bg-yellow-600 p-3">Item 2</div>
  <div class="bg-yellow-800 p-3">Item 3</div>
</div>

A gap-x-6

B gap-y-6

C gap-6

D space-x-6

💡 Hint

Tailwind has separate classes for horizontal and vertical gaps.

The class gap-x-6 adds horizontal gaps only between flex children. gap-y-6 adds vertical gaps, gap-6 adds both horizontal and vertical gaps, and space-x-6 adds margin to children but is not the modern gap property.

❓ rendering

advanced

What is the visual difference between gap-8 and space-x-8 in a flex row?

Given a flex container with three boxes in a row, what will you see if you use gap-8 versus space-x-8?

Tailwind

<div class="flex gap-8">
  <div class="bg-purple-400 p-4">Box A</div>
  <div class="bg-purple-600 p-4">Box B</div>
  <div class="bg-purple-800 p-4">Box C</div>
</div>

A <code>gap-8</code> adds padding inside the container; <code>space-x-8</code> adds gaps vertically only.

B <code>gap-8</code> adds margin only to the right of each child; <code>space-x-8</code> adds padding inside each child.

C <code>gap-8</code> adds equal 2rem gaps between all children horizontally and vertically; <code>space-x-8</code> adds 2rem margin only to the left of all children except the first.

D <code>gap-8</code> and <code>space-x-8</code> produce identical spacing in all directions.

💡 Hint

Consider how CSS gap differs from margin spacing on children.

gap-8 uses the CSS gap property to add 2rem space between flex children both horizontally and vertically. space-x-8 adds left margin of 2rem to all children except the first, only affecting horizontal spacing.

❓ selector

advanced

Which Tailwind class combination correctly adds vertical gap and horizontal space between flex children?

You want vertical gaps of 1.5rem and horizontal space of 2rem between flex children. Which class combination achieves this?

Tailwind

<div class="flex ???">
  <div class="bg-pink-300 p-3">Child 1</div>
  <div class="bg-pink-500 p-3">Child 2</div>
  <div class="bg-pink-700 p-3">Child 3</div>
</div>

A gap-x-6 space-y-8

B gap-6 space-x-8

C gap-y-8 space-x-6

D gap-y-6 space-x-8

💡 Hint

Remember Tailwind's spacing scale: 6 = 1.5rem, 8 = 2rem.

gap-y-6 adds vertical gaps of 1.5rem, and space-x-8 adds horizontal margin of 2rem between children. This combination matches the requirement.

❓ accessibility

expert

How does using gap in flex layouts improve accessibility compared to using margins for spacing?

Why is using the CSS gap property (and Tailwind's gap-* classes) better for accessibility than adding margins like space-x-* on flex children?

A Because margins cause screen readers to skip elements, while <code>gap</code> hides them visually but keeps them accessible.

B Because <code>gap</code> maintains consistent spacing even when flex items wrap or reorder, preserving layout clarity for screen readers and keyboard navigation.

C Because <code>gap</code> automatically adds ARIA labels to flex children, improving semantic meaning.

D Because margins increase the clickable area of flex children, which can confuse keyboard users.

💡 Hint

Think about how spacing behaves when flex items wrap or reorder.

Using gap ensures consistent spacing between flex items regardless of wrapping or reordering, which helps maintain a predictable layout. This consistency benefits keyboard users and screen readers by preserving logical reading and navigation order. Margins can cause uneven spacing or collapse, confusing users relying on assistive technologies.