1. Creation: display
2. Direction: flex-flow (flex-direction, flex-wrap)
3. Alignment: justify-content, align-items, align-self, align-content
4. Ordering: order
5. Flexibility: flex (flex-grow, flex-shrink, flex-basis)

display

Values include flex and inline-flex. Used on parent to create the flex container.

align-content

flex-start | flex-end | center | space-between | space-around | stretch | space-evenly

align-items

flex-start | flex-end | center | baseline | stretch

align-self

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

flex

Shorthand for [flex-basis flex-grow, and flex-shrink, or none

flex-basis

The basis by which the flex-items flex. default: auto

flex-direction

Set the containers axis for its children with row, row-reverse, column or columns-reverse on the parent

flex-flow

Shorthand for flex-direction and flex-wrap properties.

flex-grow

Positive number determines how much flex item will grow relative to other flex items in flex container when positive free space is distributed. default is 1 for container. 0 for children. Positive only

flex-shrink

Positive number determines how much flex item will shrink relative to other flex items in flex container when negative free space is distributed. default is 1

flex-wrap

To determine whether the boxes are single line or wrap, and the direction, use nowrap, wrap or wrap-reverse

justify-content

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

min-height

Default is auto, not 0

min-width

Default is auto, not 0

order

Integer. Controls order of flex item within flex container

1. Add display: flex; to the parent of the elements to be flexed.
2. Set flex-direction to horizontal or vertical
3. Set flex-wrap to control wrap direction

inline | block | list-item | inline-list-item | inline-block | flex | inline-flex | grid | inline-grid | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents | none | flow | flow-root

inline | block | list-item | inline-block | flex | inline-flex | grid | inline-grid | table | inline-table | ruby | none

display: flex;

block-level flex container box

display: inline-flex;

inline-level flex container box

Flex items

1. All non-absolutely positioned child nodes
2. Generated Content
3. anonymous flex items => non-empty text nodes

Not flex items

1. ::first-line & ::first-letter
2. white space

Kind of

1. absolutely/fixed positioned elements

Changed Properties

1. margin: adjacent flex items margins do not collapse
2. min-width & min-height: default is auto, not 0
3. visibility: collapse;

Ignored Properties

1. column-* properties
2. float
3. clear
4. vertical-align

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

• nowrap
• wrap
• wrap-reverse

Purpose: is the whole shebang on one line, or can it wrap if necessary?

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

aligns flex items along the main axis

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

aligns flex items along the cross axis

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

Only applies to multi-line flex containers.

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

Override the align-items on a per flex item basis

div:nth-of-type(3n) {
   order: -1;
}

The default value is 0. Anything lower will come before those without set values. Anything above will come after.

1. Source Order
2. Tab order
3. Right to Left languages