Container
flex
Enable flex container
A
B
C
inline-flex
Enable flex container that flows with text
Lorem ipsum dolor sit amet sed do
A
B
eiusmod tempor.
flex-row
Arrange children in a row
A
B
C
flex-row-reverse
Arrange children in a reverse row
A
B
C
flex-col
Arrange children in a column
A
B
C
flex-col-reverse
Arrange children in a reverse column
A
B
C
flex-wrap
Wrap children
A
B
C
D
flex-wrap-reverse
Wrap children in reverse order
A
B
C
D
flex-nowrap
Disable wrapping children
A
B
C
D
Flex Size
flex-1
Allow flex item to grow or shrink to fill the available space
A
B
C
flex-none
Prevent flex item from growing or shrinking
A
B
C
grow
Allow flex item to grow to fill the available space
A
B
C
grow-0
Prevent flex item from growing
A
B
C
shrink
Allow flex item to shrink
A
B
C
shrink-0
Prevent flex item from shrinking
A
B
C
flex-initial
Allow flex item to shrink but not grow
A
B
C
flex-auto
Allow flex item to grow and shrink, taking into account initial size
A
B
C
Justify
justify-start
Justify content at start (left or top)
A
B
C
justify-center
Justify content at the center
A
B
C
justify-end
Justify content at the end (right or bottom)
A
B
C
justify-between
Justify content with space between each child
A
B
C
justify-around
Justify content with space around each child
A
B
C
justify-evenly
Justify content with even space between and around each child
A
B
C
justify-normal
Justify content to their default positions as if no justify was set
A
B
C
Items
items-start
Align items at the start
A
B
C
items-center
Align items at the center
A
B
C
items-end
Align items at the end
A
B
C
items-baseline
Align items at the baseline
A
B
C
items-stretch
Stretch items to fill the container
A
B
C
Self
self-auto
Align self with default behavior
A
B
C
self-start
Align self at the start
A
B
C
self-center
Align self at the center
A
B
C
self-end
Align self at the end
A
B
C
self-stretch
Stretch self to fill the container
A
B
C
