0
0
Tailwindmarkup~5 mins

Gap between flex children in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.