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;
  : ;
  : ;
}

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 of space .

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

 {
  : flex;
  : ;
}

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 . 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

gap vs

/* 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

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.

• 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.