Gap between flex children in Tailwind

Introduction

Adding space between items in a row or column makes content easier to read and looks neat.

You want equal space between buttons in a navigation bar.

You need consistent gaps between cards in a product list.

You want to separate form fields horizontally or vertically.

You want to create breathing room between images in a gallery.

Syntax

Tailwind

flex gap-{size}

flex makes a container flexible.

gap-{size} adds space between the flex items.

Examples

This creates a horizontal row with 1rem gap between items.

Tailwind

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

This stacks items vertically with 0.5rem gap between them.

Tailwind

<div class="flex flex-col gap-2">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>

Buttons spaced with 2rem gap for clear separation.

Tailwind

<div class="flex gap-8">
  <button>Save</button>
  <button>Cancel</button>
</div>

Sample Program

This example shows three colored boxes in a row with a 1.5rem gap between them. The gap is created by the gap-6 class on the flex container.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Flex Gap Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-semibold mb-4">Flex Gap Between Children</h1>
  <div class="flex gap-6 bg-gray-100 p-4 rounded">
    <div class="bg-blue-500 text-white px-4 py-2 rounded">Box 1</div>
    <div class="bg-green-500 text-white px-4 py-2 rounded">Box 2</div>
    <div class="bg-red-500 text-white px-4 py-2 rounded">Box 3</div>
  </div>
</body>
</html>

Important Notes

The gap property works for both flex and grid containers.

Use Tailwind's spacing scale (e.g., gap-1, gap-2, gap-4, gap-6) to control the size of the gap.

Gap adds space only between items, not around the container edges.

Summary

Use flex with gap-{size} to add space between flex children easily.

Gap keeps spacing consistent and clean without extra margins on children.

Works for horizontal and vertical layouts with flex-row or flex-col.

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