container

display

Enables flex for all children.

display: flex

display: inline-flex

flex-direction

Establishes the main axis.

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

flex-wrap

Wraps items if they can't all be made to fit on one line.

flex-wrap: nowrap

flex-wrap: wrap

flex-wrap: wrap-reverse

justify-content

Attempts to distribute extra space on the main axis.

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

justify-content: space-evenly

align-items

Determines how items are laid out on the cross axis.

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

align-items: stretch

align-content

Only has an effect with more than one line of content. Examples shown here use flex-wrap.

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

align-content: stretch

children

order

Allows you to explictly set the order you want each child to appear in.

order: integer

flex-grow

Allows you to determine how each child is allowed to grow as a part of a whole.

flex-grow: 1 (applied to all)

flex-grow (1, 2, and 3)

flex-basis

Defines the size of an element before remaining space is distributed.

first item 20%, second item 40%

flex-shrink

Allows an item to shrink if necessary. Only really useful with a set size or flex-basis.

both want to be 100% wide, 2nd item has flex-shrink: 2

align-self

Sets alignment for individual item. See "align-items" for options

3rd item has align-self:flex-end