--- title: Layout description: Flex-based layout primitives. Stack things vertically or horizontally, control sizing, and distribute space. All stacks use flex-wrap by default — no media queries needed. Items wrap naturally when space runs out, adapting to zoom, font size changes, and container resizing. --- ## Vertical stack The default `.stack-v` is a vertical flex column. Use it for any top-to-bottom flow. ```html
First
Second
Third
``` ## Horizontal stacks Three horizontal variants control cross-axis alignment. All wrap by default — use `.nowrap` only when you're certain items should never wrap. `.stack-h` — centered (default) ```html resize
A
Tall
C
``` `.stack-h items-start` — top-aligned ```html resize
A
Tall
C
``` `.stack-h items-end` — bottom-aligned ```html resize
A
Tall
C
``` `.stack-h` — items wrap when space runs out ```html resize
Alpha
Bravo
Charlie
Delta
Echo
Foxtrot
Golf
Hotel
``` `.nowrap` — forced single line (use sparingly) ```html resize
Alpha
Bravo
Charlie
Delta
Echo
Foxtrot
Golf
Hotel
``` ## Flex sizing Control how items grow and shrink within a stack. `.grow` — flex-grow: 1 ```html resize
Fixed
.grow (fills remaining space)
``` `.flex-1` — flex: 1 (equal sizing) ```html resize
.flex-1
.flex-1
.flex-1
``` `.shrink` — flex-shrink: 1 ```html resize
.grow
.shrink (can compress)
``` ## Distributing space Instead of justify-content, use margin auto on child elements. This gives you precise control over which item pushes away from the others. `.ml-auto` — push last item right ```html resize
Logo
Nav
Sign In
``` `.mx-auto` — center an item ```html resize
Left
Centered
Right
``` `.mr-auto` — push remaining items right (resize to see wrap behavior) ```html resize
Logo
Sign In
``` `.mt-auto` — push item to bottom ```html
Title
Description
Action button
```