CSS alignment and gap: distribute space inside the correct box

How the rule works

A triage toolbar has a title, status, and actions. The actions need consistent spacing even when they wrap, so use flex-wrap and gap rather than right margins on every button. Align-items centers the toolbar's direct children along its cross axis; it does not change their document order. When the title grows, allow it to shrink and wrap, or the actions may overflow. A grid container could be appropriate if fixed columns must align with another region, but flexbox is enough for this one-dimensional row. Inspect actual free space before expecting justify-content to move anything. A child stretched to fill the line leaves no free space for distribution.

.triage-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.triage-toolbar__title { flex: 1 1 18rem; min-inline-size: 0; }
.triage-toolbar__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.triage-toolbar__actions button { max-inline-size: 100%; }

Cost and verification

Gap avoids trailing-margin cleanup and works across wrapped lines. Its layout cost is ordinary flex layout; the notable maintenance cost is knowing which container owns each gap. Nesting one action group inside the toolbar keeps action spacing separate from the title-to-actions spacing. Check long button labels, 320-pixel width, and 200% zoom. A row that looks centered at desktop width may wrap into an unexpected visual order at narrow width, so read it with a keyboard and screen reader as well.

Common Mistakes

• Do not use justify-content when the children already consume all available width.
• Do not add both gap and equivalent margins to the same item set.
• Do not use CSS order to fix a wrong document sequence.

Connected lessons

• CSS Layout
• CSS flexbox sizing: make control rows wrap without clipping
• CSS grid tracks: reserve a sidebar without letting content widen the page
• CSS subgrid: align nested card content to shared tracks

Related component decisions

• CSS baseline alignment: line up mixed text by its reading edge