Gap between flex children in Tailwind - Mini Project: Build & Apply

Add Gap Between Flex Children Using Tailwind CSS

📖 Scenario: You are building a simple horizontal navigation bar with three buttons. You want to add space between each button so they don't stick together.

🎯 Goal: Create a flex container with three buttons inside. Use Tailwind CSS to add a gap of 1.5rem (24px) between the buttons.

📋 What You'll Learn

Use a <div> as a flex container

Add exactly three <button> elements inside the container

Use Tailwind CSS classes to make the container a flexbox

Add a gap of 6 (1.5rem) between the flex children using Tailwind's gap utilities

Ensure the buttons have visible text: 'Home', 'About', and 'Contact'

💡 Why This Matters

🌍 Real World

Adding gaps between items in a navigation bar or any flex container is common in web design to improve readability and user experience.

💼 Career

Understanding how to use Tailwind CSS flexbox and gap utilities is important for front-end developers to build clean, responsive layouts quickly.

1

Create the flex container with three buttons

Write HTML code to create a <div> with three <button> elements inside it. The buttons should have the texts Home, About, and Contact. Do not add any Tailwind classes yet.

Tailwind

  Home
  About
  Contact

Hint

Start by writing a <div> container with three buttons inside. Don't add any classes yet.

2

Make the container a flexbox

Add the Tailwind CSS class flex to the <div> container to make it a flexbox container.

Tailwind

  Home
  About
  Contact

Hint

Add class="flex" inside the opening <div> tag.

3

Add gap between flex children

Add the Tailwind CSS class gap-6 to the <div> container to create a gap of 1.5rem (24px) between the buttons.

Tailwind

  Home
  About
  Contact

Hint

Add gap-6 alongside flex in the class attribute.

4

Add accessible labels and responsive design

Add the attribute aria-label="Main navigation buttons" to the <div> container for accessibility. Also, add the Tailwind class p-4 to add padding around the container for better spacing on all screen sizes.

Tailwind

  Home
  About
  Contact

Hint

Add aria-label="Main navigation buttons" inside the <div> tag. Also add p-4 to the class list.

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