Flex

Flexbox layout container for arranging children in a row or column.

The canonical one-dimensional layout primitive. Stack and Space are convenience wrappers with opinionated defaults.

Orbital-only props beyond basic flex direction and gap: wrap, fill (height 100%), full_width, and token-based padding / margin via SpacingInset.

Full control over direction, wrap, inline, fill, and inset padding
Toolbars and form rows that need alignment along both axes
Inline clusters beside text or other inline content (inline=true)
When Stack (even-gap column) or Space (space-between) defaults do not fit

Choose direction: default row, or vertical=true for a column stack.
Set gap to a FlexGap preset or custom size — avoid margin hacks.
Tune align (cross-axis) and justify (main-axis) for centering or distribution.
Set inline=true when the flex container should sit in flowing text or inline UI.

Default

Horizontal flex row with medium gap between items—the baseline for toolbars, button groups, and inline control rows.

Item A

Item B

Vertical stack

Column direction stacks children for form fields, settings sections, and vertically listed actions.

First

Second

Inline flex

inline-flex keeps the container in the text flow so compact clusters sit beside surrounding copy without breaking the line.

Before

after

Gap matrix

Compare Small, Medium, and Large presets plus custom Size and WH values so spacing stays consistent without margin hacks.

Small

Medium

Large

Size(20)

WH(8,24)

Centered content

Center on both axes when a single block should sit in the middle of a fixed-height region (empty states, compact panels).

Centered

Align (cross-axis)

Start, Center, and End alignment along the cross axis when row height exceeds item height.

Start

Center

End

Justify (main-axis)

Start, Center, End, and SpaceBetween distribute items along the main axis—SpaceBetween is common for footer action bars.

Start

Center

End

Between