How to Add Space Between Flexbox Items in CSS

By the end of this page, you will understand the proper way to create spacing between Flexbox items in CSS. You will learn when to use gap, when margins are still useful, how spacing behaves in wrapping layouts, and how this is handled in real codebases.

Flexbox is used to arrange items in a row or column. A very common need is adding space between those items.

The modern CSS property designed for this is gap.

.container {
  display: flex;
  gap: 10px;
}

gap adds space between flex items without adding extra space on the outside edges of the container. That is why it is usually cleaner than adding margins to each child and then compensating with negative margins on the parent.

Why this matters

Using the correct spacing tool makes layouts:

• easier to read
• easier to maintain
• less error-prone
• more consistent across components

Margins can still work, but they are attached to individual elements. gap is attached to the layout container, which is often a better mental model: the container controls spacing between its children.

Important detail

gap works in:

• Flexbox
• Grid
• multi-column layouts

For Flexbox specifically, gap is now the standard way to create consistent spacing between items.

Think of a Flexbox container like a row of boxes placed on a shelf.

• Using margin is like taping extra padding onto each box.
• Using gap is like telling the shelf itself to keep a fixed amount of distance between boxes.

That is why gap usually feels more natural. The spacing rule belongs to the layout, not to each item.

Basic syntax

.container {
  display: flex;
  gap: 10px;
}

This adds 10px of space between all flex items.

Your example using gap

#box {
  display: flex;
  width: 100px;
  gap: 10px;
}

.item {
  background: gray;
  width: 50px;
  height: 50px;
}

Here:

• the container uses display: flex
• gap: 10px creates spacing between items
• the items no longer need horizontal margins

Row and column gaps separately

If your flex container wraps, you can control horizontal and vertical spacing separately.

.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  column-gap: 20px;
}

Or with shorthand:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

This means:

• 12px between rows
• 20px between columns

Column flex direction

gap also works when items are stacked vertically.

.container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

Now the spacing appears between items from top to bottom.

Consider this example:

.container {
  display: flex;
  gap: 10px;
}

.item {
  width: 40px;
  height: 40px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

What happens step by step

1. The browser finds .container and applies display: flex.
2. That makes its direct children flex items.
3. The browser lays out the three .item elements in one row by default.
4. gap: 10px tells the browser to place 10px of space between adjacent items.
5. No extra space is added before the first item or after the last item.

Visual idea

Without gap:

[item][item][item]

With gap: 10px:

[item]  [item]  [item]

If the container wraps

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

Now the browser also adds the same spacing between rows when items move onto a new line.

Spacing between flex items appears everywhere in frontend development.

Navigation bars

.nav {
  display: flex;
  gap: 16px;
}

Used for links like Home, About, Contact.

Button groups

.actions {
  display: flex;
  gap: 8px;
}

Useful for Save, Cancel, Delete buttons.

Tag lists or chips

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

Great for labels, filters, or categories.

Card toolbars

.card-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

Used for icons, buttons, and status labels inside a card.

Form layouts

.form-row {
  display: flex;
  gap: 12px;
}

Common for placing inputs side by side.

In real projects, developers usually prefer gap for layout spacing because it keeps spacing rules in one place.

Common pattern: component-controlled spacing

.toolbar {
  display: flex;
  gap: 0.75rem;
}

This is easier to maintain than giving every child its own margin.

Common pattern: wrapping UI elements

.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

This avoids special-case CSS such as:

• removing margin from the first item
• removing margin from the last item
• adjusting edges with negative margins

When margins are still used

Margins are still common when:

• a single item needs custom spacing
• one element must push another using margin-left: auto
• spacing should exist outside the component, not only between children

Example:

.nav-item:last-child {
  margin-left: auto;
}

That is a different job from gap. gap handles regular spacing between sibling items; margins handle element-specific layout adjustments.

1. Using margins when gap is the simpler tool

Broken or harder-to-maintain approach:

.container {
  display: flex;
  margin: 0 -10px;
}

.item {
  margin: 0 10px;
}

Better:

.container {
  display: flex;
  gap: 20px;
}

2. Expecting gap to add outer spacing

gap only adds space between items.

If you want space inside the container edges, use padding on the container.

.container {
  display: flex;
  gap: 12px;
  padding: 12px;
}

3. Applying gap to the items instead of the container

Wrong:

.item {
  gap: 10px;
}

Unless .item is itself a flex or grid container, this does nothing.

Correct:

.container {
  display: flex;
  gap: 10px;
}

4. Forgetting browser support in older environments

Modern browsers support Flexbox gap, but if you are working in a very old browser environment, margins may still be used as a fallback.

5. Confusing justify-content: space-between with gap

space-between distributes available free space across the whole row. It is not the same as fixed spacing.

.container {
  display: flex;
  justify-content: space-between;
}

This can create very large spaces if the container is wide.

gap vs margin

• Use gap for consistent spacing between siblings.
• Use margin when one specific item needs special positioning.

gap vs space-between

• gap gives fixed spacing like 12px.
• space-between stretches items apart based on available room.

Example:

.container {
  display: flex;
  gap: 12px;
}

vs

.container {
  display: flex;
  justify-content: space-between;
}

/* Basic flex spacing */
.container {
  display: flex;
  gap: 10px;
}

/* Separate row and column spacing */
.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 16px;
}

/* Shorthand: row-gap column-gap */
.container {
  display: flex;
  gap: 8px 16px;
}

/* Vertical flex layout */
.container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

Rules to remember

• gap belongs on the flex container
• gap adds space only between items
• use padding for space inside container edges
• use margin for item-specific spacing
• justify-content: space-between is not the same as gap

Quick choice guide

• Need equal spacing between all flex items? → gap
• Need extra space around the whole container? → padding
• Need one item to behave differently? → margin

Is gap the correct way to add space between Flexbox items?

Yes. In modern CSS, gap is the standard property for spacing between flex items.

Does gap work with Flexbox and Grid?

Yes. It works with both Flexbox and Grid layouts.

Why did people use margins and negative margins before?

Before Flexbox gap was widely supported, margins were a common workaround for creating consistent spacing.

Does gap add space on the outside of the container?

No. gap only adds space between items. Use padding if you also want inner space at the container edges.

What is the difference between gap and justify-content: space-between?

gap creates fixed spacing. space-between distributes leftover space across the row.

Can I use different horizontal and vertical gaps?

Yes. Use row-gap, column-gap, or the two-value gap shorthand.

When should I still use margins instead of gap?

Use margins when a single item needs custom spacing or positioning, such as margin-left: auto to push an item to the end.

• Flexbox — gap is commonly used inside flex layouts.
• CSS Grid — Grid also uses gap for spacing between rows and columns.
• margin — Useful for element-specific spacing outside the standard layout gap.
• padding — Adds space inside a container rather than between its children.
• justify-content — Controls distribution of free space along the main axis.
• align-items — Controls alignment of flex items on the cross axis.
• flex-wrap — Affects how spacing behaves when items move onto multiple lines.