Space

Distribution layout that pushes children to opposite edges of a full-width row.

Also called a distribution row in Orbital docs. This is not Ant Design Space (even gaps between siblings) and not the design-token "spacing" concept — it defaults to justify=SpaceBetween.

Space is a convenience wrapper over Flex with full_width=true and justify=SpaceBetween by default. Use for toolbars, page headers, and footer action bars. Reach for Stack when you need even gaps between every child. Reach for Flex when you need wrap, inline placement, fill, or inset padding.

Use SpaceConfig::even_gap only as an escape hatch when you need even gaps — prefer Stack for that pattern.

  • Page headers and footers with content at opposite edges
  • Toolbar rows that separate a title cluster from trailing actions
  • Any full-width row where main-axis distribution matters more than even gap
  • Use default Space for a horizontal space-between row.
  • Set config.vertical=true for column distribution.
  • Override config.justify when you need center, end, or even-gap layout.
Default (space-between)

Items distribute to opposite edges of a full-width row — the default Space behavior.

Start
End
Vertical distribution

Column direction pushes items to top and bottom edges.

Top
Bottom
Even gap override

Override justify to None for even gaps — prefer Stack for this pattern.

One
Two
Align center

Cross-axis center alignment with mixed-height children.

Short
Tall
Justify center

Override the default to center items along the main axis.

Center
Center
Toolbar pattern

Title cluster on the left, actions on the right — typical space-between usage.

Documents 3 new