Flex Reference ↓

Direction

ui-flex-row — default row direction
A
B
C
ui-flex-column
A
B
C

Wrap

ui-flex-wrap — items wrap to next line
A
B
C
D
E
ui-flex-nowrap — single line
A
B
C
D
E

Flex sizing

ui-flex-1   ui-flex-auto   ui-flex-none   ui-flex-initial
flex-1
flex-auto
flex-none
flex-initial

Shrink & grow

ui-shrink-0 — prevent shrinking
shrink-0 (fixed)
shrinks to fit
ui-grow-1 — allow item to grow
fixed
grows
fixed

Align items — cross axis

ui-items-*

items-start

A
B

items-center

A
B

items-end

A
B

items-stretch

A
B

Justify content — main axis

ui-justify-*
justify-start
justify-center
justify-end
justify-between
end
evenly
B
C

Align shorthands — horizontal

ui-align-left
A
B
ui-align-center
A
B
ui-align-right
A
B
ui-align-between
A
B

Align shorthands — vertical

ui-align-top
A
B
ui-align-middle
A
B
ui-align-bottom
A
B
ui-align-stretch
A
B

Gap

gap-1
gap-1
gap-1
gap-2
gap-2
gap-2
gap-3
gap-3
gap-3
gap-4
gap-4
gap-4
gap-6
gap-6
gap-6
gap-8
gap-8
gap-8

Composition helpers

ui-row — flex wrap, items-center, gap-3
Item A
Item B
Item C
ui-stack — flex column, gap-4
Item A
Item B
Item C

Reference

Base

ClassDescription
.ui-flexdisplay: flex (row)
.ui-flex-inlinedisplay: inline-flex
.ui-flex-rowdisplay: flex + flex-direction: row
.ui-flex-columndisplay: flex + flex-direction: column
.ui-flex-wrapflex-wrap: wrap
.ui-flex-nowrapflex-wrap: nowrap
.ui-flex-1flex: 1 1 0% — fill remaining space
.ui-flex-autoflex: 1 1 auto
.ui-flex-initialflex: 0 1 auto
.ui-flex-noneflex: none — no shrink/grow
.ui-shrink-0 / .ui-shrink-1flex-shrink: 0 or 1
.ui-grow-0 / .ui-grow-1flex-grow: 0 or 1
.ui-items-*start, center, end, stretch — align-items
.ui-justify-*start, center, end, between, around, evenly — justify-content
.ui-align-left / -center / -right / -betweenflex + justify-content shorthand
.ui-align-top / -middle / -bottom / -stretchflex + align-items shorthand
.ui-gap-*1, 2, 3, 4, 6, 8 — gap between flex children
.ui-rowflex wrap + items-center + gap-3 shorthand
.ui-stackflex column + gap-4 shorthand

Modifiers

ClassDescription

Options

ClassDescription