Stack
Layout
Flexbox-powered vertical/horizontal stacking component with configurable gap, alignment, and distribution properties
Stack - Vertical Layout
Extra Small Spacing (xs)Items are very closeCompact layout
Small Spacing (sm)Slightly more spaceStill compact
Medium Spacing (md) - DefaultComfortable spacingMost common choice
Large Spacing (lg)More breathing roomGreat for emphasis
Stack - Horizontal Layout
Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6Tag 7Tag 8
Stack - Alignment Options
Align Start
Align Center
Align End
Stack - Justification
Justify Between
Justify Center
Justify Evenly
OneTwoThree
Stack - Responsive Layout
Responsive Direction
Vertical on mobile, horizontal on desktop (resize window to see)
Stack - With Dividers
Vertical Dividers
Section One
First section content
Section Two
Second section content
Section Three
Third section content
Horizontal Dividers
Step 1
Step 2
Step 3
Practical Example - Form Actions
Complete Form Example
Usage Guidelines
When to Use
- Vertical lists
- Horizontal button groups
- Form field layouts
Accessibility
- Logical focus order
- Proper content flow for assistive tech
Performance
- Flexbox-based
- No JavaScript calculations
Common Mistakes
- Using for 2D layouts (use Grid)
- Nested Stacks when Grid is better
Frequently Asked Questions
Stack is for 1D layouts (vertical or horizontal) using Flexbox. Grid is for 2D layouts.
Yes, Stack supports flex-wrap for items that wrap to the next line when space runs out.
Related Components
View allContainer
Responsive container implementing max-width constraints with fluid padding and automatic centering for consistent content alignment across breakpoints
Grid
CSS Grid-based layout system with configurable columns, gaps, and responsive GridItem children supporting explicit placement and spanning
Masonry
Masonry layout system with configurable columns for Pinterest-style cascading grid layouts
Paper
Material-style elevated surface with shadow variants and glass morphism effects