Anatomy
- Stack: Container that holds items and specifies the direction of alignment.
- Stack Item (Optional): Wrapper for children that need individual flex properties (e.g. grow, shrink, basis)
Usage Guidelines
When to use this component
- To arrange inline components. If the component you are viewing has all of its child items displayed inline horizontally or vertically, then most probably Stack is the best solution here.
When not to use this component
-
When components need to be arranged along both axes and require consistent widths or heights to create a grid-like layout. Use Grid instead.
Best Practices
Use stack for inline alignment of elements
Don't use Stack when elements need consistent sizing or cross-axis alignment. Consider Grid instead.
Nest stacks to build complex layouts where groups don’t depend on each other’s sizing or alignment
Only use Stack Item when a child needs flex properties; avoid wrapping everything by default.
Don’t override Stack spacing with custom margins; rely on the gap prop to keep spacing consistent.
General Component Behaviors
Direction
Stack aligns it’s item in a row by default. Direction can be changed with a direction prop.
Dimensions
By default Stack adapts it’s dimensions to the content inside it. To expand full width or height of it’s parent, use full-width and full-height props.
Wrapping
Stack doesn’t wrap it’s children by default. You can allow wrapping with a wrap prop
Responsive Behavior
Known Gaps
- Ability to configure stacking direction and gap for different viewports