Everything
Direction: row (default)
1
2
3
Direction: row-reverse
1
2
3
Direction: column
Item 1
Item 2
Item 3
Justify: space-between
Left
Middle
Right
Justify: center + Align: center
Short
Taller padding
Short
Justify: space-evenly
A
B
C
Align: stretch (default, equal height)
Short
Tall
Medium
Align: start (items hug top)
Short
Tall
Medium
Wrap + align-content: space-between
1
2
3
4
5
6
Gap: S
A
B
C
Gap: L
A
B
C
Gap: custom 40px
A
B
C
Item sizes: fill / 1× / 2× / 3×
1×
2×
3×
Item size: custom percent + pixel + fit
25%
300px
Fit content
Item align-self: override parent align
Self: start
Self: center
Self: end
Self: stretch (tall)
Item order: DOM is A-B-C-D, visual is C-A-D-B
A (order 2)
B (order 4)
C (order 1)
D (order 3)
Edge: wrap-reverse (last row first)
1 (visually bottom-left)
2 (visually bottom-right)
3 (visually top-left)
Edge: fit + fill mix (sidebar pattern)
Sidebar (fit)
Main content fills remaining space — lorem ipsum dolor sit amet consectetur adipiscing elit
Edge: align_self auto (inherit container align)
Auto (inherits end)
Overrides to start
Default (auto)
Breakpoint: mobile → column (resize to < 768px)
First
Second
Third
Breakpoint: tablet → column (< 1024px)
First
Second
Third
Edge: full_width false → true at mobile
Narrow on desktop
Full on mobile
Edge: full_width true → false at mobile
Full on desktop
Narrow on mobile