How to set distance between flexbox items with CSS?

Sometimes, we wqant to set distance between flexbox items with CSS.

In thios article, we’ll look at how to set distance between flexbox items with CSS.

How to set distance between flexbox items with CSS?

To set distance between flexbox items with CSS, we use the gap, row-gap, or column-gap properties.

For instance, we write

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

to sety the vertical and horizontal gap between elements in the element with ID box with gap: 10px;.

We set the horizontal gap only with row-gap by writing

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

And we set the horizontal gap only with row-gap by writing

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

Conclusion

To set distance between flexbox items with CSS, we use the gap, row-gap, or column-gap properties.