Flex is the element the rest of Once UI is made of. It renders a flex container and takes every layout, spacing, size and surface prop in the system, so a page is composed by nesting it rather than by writing CSS.
You will rarely write Flex itself. Row and Column are the same component with direction preset, and reading <Column gap="16"> beats reading <Flex direction="column" gap="16">:
Reach for Flex directly when the direction is conditional — a row on desktop that stacks on a phone — since that is the one thing a preset cannot express.
horizontal and vertical are named for the axis you see, not for flexbox's main and cross axis, so they mean the same thing whichever way the container runs.
Sizes take a spacing token, a number (read as rem), or any CSS unit. fill and fit are the two you want most: fill the parent, or shrink to the content.
Space between siblings is gap on the parent; space inside an element is padding. Prefer both over margin — a layout built from gaps stays correct when a child is added, removed or reordered.
Background, border, radius and shadow are all tokens. A colour is a scheme and a weight (brand-medium, neutral-alpha-weak), never a hex.
blendMode, blur, backdropBlur and userSelect are classes, so setting them keeps Flex and Grid server components — a style object does not. The blur scale is the static spacing steps: xs 0.25rem, s 0.5rem, m 1rem, l 2rem, xl 3rem; a number is rem, written inline on the server. blur sets the whole filter, so a blur combined with another filter function still goes in style.
transform is deliberately not a prop. It is what animations drive, frame by frame, so it stays in style; for a static shift, translateX and translateY do the same without leaving the server.
theme, themeBorder, themeSolid and themeSurface restyle everything inside, the way ThemeProvider restyles the page: they write data-theme, data-border, data-solid and data-surface, typed with the provider's own values. theme="dark" renders the subtree dark; the dark boolean only shows or hides an element depending on the theme around it.
Text colour is inherited, so it is set on the container rather than on every label inside it.
Every prop above can be overridden per breakpoint. Pass an object to xl, l, m, s or xs — they cascade down, so s also applies at xs unless xs says otherwise. This is how layout adapts; media queries are never needed.
- Row and Column — the presets you will use instead
- Grid — for two-dimensional layout
- Spacing — the token scale behind gap and padding
- Color — the scheme and weight behind background and border
