Flex Container

Display

display: flex;

display: inline-flex;

Flex flow (shorthand)

flex-flow: row nowrap; (flex-direction flex-wrap)

Flex direction

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

• row
• row-reverse
• column
• column-reverse

Flex wrap

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

• nowrap
• wrap
• wrap-reverse

Justify content

justify-content: flex-start;

justify-content: center;

justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

• flex-start
• center
• flex-end
• flex-between
• space-around
• space-evenly

Align items

align-items: stretch;

align-items: flex-start;

align-items: center;

align-items: flex-end;

align-items: baseline;

• stretch
• flex-start
• center
• flex-end
• baseline

Align content

align-content: stretch;

align-content: flex-start;

align-content: center;

align-content: flex-end;

align-content: space-between;

align-content: space-around;

• stretch
• flex-start
• center
• flex-end
• space-between
• space-around

Flex Item

Order

order: 0;

Flex (shorthand)

Flex grow

flex-grow: 0;

flex-grow: 1;

• 0
• 1

Flex shrink

flex-shrink: 0;

flex-shrink: 1;

Flex basis

Align self

align-self: auto;

align-self: flex-start;

align-self: center;

align-self: flex-end;

align-self: baseline;

align-self: stretch;

• auto
• flex-start
• center
• flex-end
• baseline
• stretch