Layout
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 is a vertical flex column. Use it for any top-to-bottom flow.
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-horizontal — centered (default)A
Tall
C
.stack-horizontal items-start — top-alignedA
Tall
C
.stack-horizontal items-end — bottom-alignedA
Tall
C
.stack-horizontal — items wrap when space runs outAlpha
Bravo
Charlie
Delta
Echo
Foxtrot
Golf
Hotel
.nowrap — forced single line (use sparingly)Alpha
Bravo
Charlie
Delta
Echo
Foxtrot
Golf
Hotel
Flex Sizing
Control how items grow and shrink within a stack.
.grow — flex-grow: 1Fixed
.grow (fills remaining space)
.flex-1 — flex: 1 (equal sizing).flex-1
.flex-1
.flex-1
.shrink — flex-shrink: 1.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 rightLogo
Nav
Sign In
.mx-auto — center an itemLeft
Centered
Right
.mr-auto — push remaining items right (resize to see wrap behavior)Logo
Sign In
.mt-auto — push item to bottomTitle
Description
Action button