html - Equal space between flex items

Question

Is there a way to put a full unit of space on both sides of all items, including the first and last?

I am trying to find a way to have equal spacing around flexbox children.

In this article it seems like the nearest thing is justify-content: space-around. It says that:

space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

Answer 1

There are at least two methods for equal space between all items, including the first and last items. One method, however, doesn't yet have full browser support.

---

pseudo-elements

Note this section from Firefox documentation:

In-flow ::after and ::before pseudo-elements are now flex items.

In fact, all major browsers consider pseudo-elements on a flex container to be flex items.

Knowing that, add ::before and ::after to your container.

With justify-content: space-between and zero-width pseudo-elements, the visible flex items will appear evenly spaced.

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before {
  content: "";
}

flex-container::after {
  content: "";
}

/* non-essential decorative styles */
flex-container {
  padding: 5px 0;
  background-color: lightyellow;
  border: 1px solid #aaa;
}
flex-item {
  height: 50px;
  width: 75px;
  background-color: lightgreen;
}

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>