Container

display

Makes itself a flex container

display: flex;flex

display: inline-flex;inline-flex

flex-direction

Defines the main axis and order

flex-direction: row;flex-row

flex-direction: row-reverse;flex-row-reverse

flex-direction: column;flex-col

flex-direction: column-reverse;flex-col-reverse

flex-wrap

Wrapping rules

flex-wrap: nowrap;flex-nowrap

flex-wrap: wrap;flex-wrap

flex-wrap: wrap-reverse;flex-wrap-reverse

justify-content

How elements are spaced along the main axis

justify-content: flex-start;justify-start

justify-content: center;justify-center

justify-content: flex-end;justify-end

justify-content: space-around;justify-around

justify-content: space-between;justify-between

justify-content: space-evenly;justify-evenly

align-items

How elements are positioned along the cross axis

align-items: flex-start;items-start

align-items: center;items-center

align-items: flex-end;items-end

align-items: baseline;items-baseline

align-items: stretch;items-stretch

align-content

Like align-items, but applies when there is more than one line of content

align-content: flex-start;content-start

align-content: center;content-center

align-content: flex-end;content-end

align-content: space-between;content-between

align-content: space-around;content-around

align-content: stretch;content-stretch

Items

Order

Explicitly set order of an item relative to others

order: <number>;order-<number>

Flex Grow

How the child should expand on-axis relative to others

flex-grow: <number>;grow-<number>

Flex Basis

The initial size of an element before space is distributed

flex-basis: <number>;basis-<number/full/auto/[breakpoint]>

Flex Shrink

How the child should shrink on-axis relative to others, as needed

flex-shrink: <number>;basis-<number>

Align Self

Individual alignment

align-self: flex-start;self-start

align-self: center;self-center

align-self: flex-end;self-end

align-self: stretch;self-stretch