CSS Flexbox Gap

CSS Flexbox Gap

The CSS gap property adds consistent spacing between flex items without adding space around the outside edges of the flex container.

Flexbox supports gap, row-gap, and column-gap. These properties provide a convenient way to control spacing between items, especially when flex items wrap onto multiple lines.

How gap Works

The gap property creates space between neighboring flex items and between flex lines when wrapping occurs.

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

This creates a 20-pixel gap between adjacent flex items. Unlike margins applied to every item, gap does not create additional spacing around the outer edges of the flex container.

The gap is part of the Flexbox layout and is taken into account when the browser determines how much space is available for the flex items.

The gap Property

The gap property is a shorthand for row-gap and column-gap.

.flex-container {
  display: flex;
  gap: 15px;
}

When one value is specified, the same gap value is used for both rows and columns.

A single-line row flex container only has spacing between items along that row, so the visible spacing is the column gap. If wrapping creates additional rows, the row gap becomes visible as well.

The row-gap Property

The row-gap property controls the spacing between rows of flex items.

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

In a wrapping row-oriented flex container, row-gap becomes visible when the items form more than one row.

If the flex container contains only one row, there is no second row for a row gap to separate.

The column-gap Property

The column-gap property controls the spacing between columns of flex items.

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

In a normal row-oriented flex container, this commonly appears as horizontal spacing between neighboring flex items.

Using row-gap and column-gap separately is useful when the layout needs different spacing in each direction.

Using Two gap Values

The gap shorthand can accept two values.

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

When two values are specified, the first value sets row-gap and the second sets column-gap.

gap with Wrapping

The gap property is especially useful with flex-wrap: wrap because it can provide consistent spacing both between items and between flex lines.

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

As the available width changes and items move onto additional lines, the browser maintains the specified gap between neighboring items and lines.

This avoids many of the spacing adjustments that would otherwise be needed when margins are used on individual flex items.

gap and flex-direction

The relationship between rows, columns, and the Flexbox axes can be less obvious when flex-direction changes.

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

With a column-oriented flex container, the items are arranged vertically along the main axis. A single gap value still provides consistent spacing between adjacent items.

When using separate row-gap and column-gap values, remember that their names refer to rows and columns rather than directly to the main and cross axes.

gap vs Margin

Both gap and margins can create space between flex items, but they work differently.

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

For consistent spacing between flex items, gap is often simpler than assigning margins to each item.

gap and justify-content

The gap property and justify-content can both affect the visible space between flex items, but they serve different purposes.

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

The gap property establishes spacing between neighboring items. The justify-content property distributes any remaining main-axis space after item sizes and gaps have been considered.

With values such as space-between, the final visible space between items can therefore be larger than the specified gap.

CSS Flexbox Gap Example

The following example compares equal gaps with different row and column gaps. Open the example in the editor and change the values to see how spacing between flex items and flex lines changes.

.equal-gap {
  gap: 15px;
}
.different-gap {
  row-gap: 30px;
  column-gap: 10px;
}