CSS Flexbox Gap Explained with Examples

CSS Flexbox and CSS Grid are both powerful layout tools. Flexbox handles one-dimensional alignment, while CSS Grid covers two-dimensional layouts with rows and columns.

When you need spacing between elements in a flex layout, margins can get messy fast. The CSS gap property (shorthand for row-gap and column-gap) solves this cleanly.

Most developers know gap from CSS Grid, but it works just as well on flex containers. I’ve been using it in production for years and it’s supported across all modern browsers.

Spacing Elements in a Flex Container with CSS Gap

CSS Gap works with CSS Grid, but there are many cases where you need spacing without a defined grid – a flex container, for example.

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

.flex-gap {
  display: flex;
  flex-wrap: wrap;
}

The flex-wrap property will allow those flex items to wrap in a row according to the parent element’s width.

Without any spacing, it looks like this:

And when we narrow the width of the parent element (container) due to the use of flex-wrap:

Spacing with Margins

If we want to add spacing between flex items, we can simply add margin to each of the elements:

.flex-gap {
  display: flex;
  flex-wrap: wrap;
}

.flex-gap > div {
  margin: 6px;
}

And here’s how it looks when we narrow the width of the parent element:

The margin works, but it doesn’t produce the same result as CSS Gap. Notice the extra spacing around the outer edges of the container – that’s the margin bleeding outward.

A key difference: margin is applied to individual flex items, while gap is applied to the flex container itself. Gap only creates space between items, never on the outer edges.

Spacing with Gap

With gap, the spacing applies only between elements – not between an element and its container. The difference becomes obvious in the next example:

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

And it looks like this:

You can also pass two values to control row and column spacing separately:

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

Or use the longhand properties directly:

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

Browser Support

gap for Flexbox is supported across all major browsers. Firefox shipped it first in October 2018, Chrome followed in July 2020, and Safari added it in April 2021. The property is also flow-relative, meaning it adapts automatically to different writing modes – handy if you work with CSS logical properties.

You might think of using @supports to detect gap support in Flexbox:

@supports (display: flex) and (gap: 10px) {
  .container {
    display: flex;
    gap: 10px;
  }
}

What’s Next: Gap Decorations

A new CSS feature called Gap Decorations is being developed as a W3C Working Draft. It extends the existing column-rule property to work with Grid and Flexbox, and introduces a new row-rule property.

This will let you add visual separators (lines, patterns) between items without extra DOM elements or pseudo-elements. Chrome and Edge 139+ already support it behind the “Experimental Web Platform features” flag.

FAQs

That covers the CSS gap property for Flexbox. Once you start using it, you won’t go back to margin-based spacing.