Stack
One-dimensional layout with a consistent gap between every child.
Convenience wrapper over Flex with even-gap, full-width defaults. Equivalent to Flex(vertical=true, full_width=true) with optional direction override. Set config.horizontal=true for a row direction.
Default presets: column direction, FlexGap::Medium, full_width=true, no justify override. Reach for Space to push children to opposite edges. Reach for Flex when you need wrap, inline, fill, or inset padding.
- Vertical form sections, settings blocks, and button rows
- Even gaps between every child on one axis
- Opinionated defaults over raw flex props
- Pass
config=StackConfig::vertical(FlexGap::Medium)or customize fields onStackConfig. - Set
config.horizontal=truefor row direction. - Tune
config.align/config.justifyfor distribution.
Default row direction spaces inline items with medium gap.
Column direction stacks children with explicit medium gap.
Compare small and large gap presets side by side.
Cross-axis centering with mixed-height children in a bounded frame.
Main-axis distribution pushes items to opposite edges.
Buttons, text, and badges share the same stack gap rhythm.