Space is added only between adjacent children. Since none is added at the outer edges, you need neither negative margins to cancel it nor a wrapper. It works the same way in Grid.

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

<ul class="tags">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Each child got half the margin, and the parent’s negative margin canceled the part that stuck out at the edges. A wrapper with overflow: hidden was also needed to keep the negative margin from spilling out.

.tags-wrapper {
  overflow: hidden;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
}

.tags > li {
  margin: 4px;
}

<div class="tags-wrapper">
  <ul class="tags">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</div>