Flex

Usage

The general flex primitive: direction, gap (a spacing token key), align, justify and wrap. Same discipline as Stack — no margin, padding, width or colour props.

Why align defaults to center

CSS defaults align-items to stretch. That is rarely what you want in a row: a label beside a button, or an icon beside text, gets visibly stretched to the tallest sibling's height.

So Flex defaults to center, which is right for a row of mixed-height things. Pass align="stretch" when you genuinely want the CSS behaviour — equal-height cards in a row, for instance.

Wrapping

wrap is off by default, matching CSS. Turn it on for anything whose item count you do not control — a tag list, filter chips, breadcrumbs. Without it those overflow off the side of a phone rather than reflowing.

Flex vs Stack

Stack is the vertical case with a narrower API and align="stretch" as its default, which is what stacked form fields want. Use it whenever the direction is vertical — Flex direction="column" works but says less about intent.

And for anything genuinely two-dimensional, use CSS Grid directly. Neither of these tries to wrap it, which is why the pre-1.0 Grid and GridItem components are gone.

Props

Plus every native attribute of the element you render, via prop spreading.