gap in flexbox vs margin for item spacing

Adding margins to flex children for spacing creates unwanted outer margins on the first/last items, requiring negative margin hacks on the container or :first-child/:last-child overrides.

Use the gap property on the flex container instead of margins on children:

/* Modern approach */
.flex-container {
  display: flex;
  gap: 1rem; /* uniform gap between all children, no outer edges */
  flex-wrap: wrap;
}

/* row-gap and column-gap are the longhand properties */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;    /* vertical gap between wrapped rows */
  column-gap: 0.5rem; /* horizontal gap between items */
}

/* Old approach with margin hack -- avoid this */
/* .flex-container { margin: -0.5rem; }
.flex-item { margin: 0.5rem; } */

gap (and its longhands row-gap, column-gap) applies spacing only between flex items, never on the outer edges. This is semantically correct and eliminates the need for negative margin hacks.

Any flexbox layout requiring consistent spacing between items.