How to Properly Space Flexbox Items Using CSS?

How to Adjust Distance Between Flexbox Items with CSS

Setting the minimum distance between flexbox items using margin: 0 5px and margin: 0 -5px may seem like a workaround. However, there are dedicated CSS properties designed for this purpose:

CSS gap Property:

In modern browsers, the gap property is available for multi-column, flexbox, and grid layouts. It sets the space between both rows and columns:

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

CSS row-gap Property:

For flexbox and grid layouts, row-gap defines the space between rows:

#box {
   display: flex;
   row-gap: 10px;
}

CSS column-gap Property:

In multi-column, flexbox, and grid layouts, column-gap specifies the space between columns:

#box {
  display: flex;
  column-gap: 10px;
}

Example:

To illustrate the usage, consider the following code:

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}

.item {
  background: gray;
  width: 50px;
  height: 50px;
  border: 1px black solid;
}

<div>

This code creates a flexbox with four gray items, spaced evenly by a 10-pixel gap.

The above is the detailed content of How to Properly Space Flexbox Items Using CSS?. For more information, please follow other related articles on the PHP Chinese website!