gap Works in Flexbox Too (Kill Your Margin Hacks)

Everyone learned gap with grid, and somehow half the industry never got the memo that flexbox got it too. Codebases are still full of the old spells:

/* The greatest hits of "space between flex items", 2012-2021 */
.item:not(:last-child) { margin-right: 16px; }
.list > * + * { margin-left: 16px; }              /* the lobotomized owl */
.wrapper { margin: -8px; } .wrapper > * { margin: 8px; }   /* negative margin dance */

All of it collapses into:

.toolbar {
    display: flex;
    gap: 16px;
}

Why gap beats the margin patterns (beyond brevity)

Wrapping just works. This is the big one. Every margin-based scheme falls apart the moment items wrap: the last item on each row carries an unwanted trailing margin, and there's no clean way to add vertical spacing between wrapped rows without the negative-margin wrapper trick. With gap:

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;   /* 8px between rows, 12px between items */
}

Rows and columns both spaced correctly at any wrap point, no edge cases. Tag clouds, filter chips, button groups - this is their natural habitat.

Direction changes are free. Switch flex-direction from row to column in a media query and gap still means "space between items". Margin-based spacing needs its own responsive overrides (margin-right becomes margin-bottom...).

No first/last exceptions. gap only exists between items, never outside them. The :not(:last-child) ceremony exists precisely because margins don't know where the container ends. Gap does.

Small print worth knowing

• Shorthand order is gap: row column - row first, which trips up people who think in x/y. One value sets both.
• gap participates in intrinsic sizing: a flex container's min-content width includes its gaps, so justify-content: space-between plus gap combine sensibly (gap sets the minimum spacing, space-between distributes the rest).
• Support: all browsers since April 2021 (Safari 14.1 was the last holdout). Unless you're supporting truly ancient Safari, there is no compatibility excuse left.

This is the least glamorous tip on this site and possibly the highest-frequency one - I write gap in flexbox probably twenty times a week. Grep your codebase for > * + and enjoy the deletions.