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