Page Title

1. Flex Direction

Flex direction controls how elements are showed.
You can choose row or column directions.

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

1

2

3

4

5

2. Flex Wrap

Flex wrap controls wrapping of elements.

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

1

2

3

4

5

1

2

3

4

5

3. Justify-content

Justify-content defines the alignment along the X axis.
The X and Y axis / alignment direction can change depending if you are using flex-direction: row or column.
Simply if flex-direction = row, justify-content = X axis.
Simply if flex-direction = column, justify-content = Y axis.

flex-wrap:flex-start; flex-end; center; space-between; space-around; space-evenly;

1

4. Align-items

Align items defines the alignment along the Y axis.

align-items:flex-start; flex-end; center; stretch; baseline;

1

2

3

4

5

5. Order

Order controls the order of items.

order:-1;1;2;

1

2

3

4

5

6. Flex Grow + Flex Shrink + Flex Basis = Flex

Flex-grow controls growth of items, Flex-shrink shrinking of items and Flex basis gives us basic width of elements.
Try to shrink window or make it wider. Elements 1 and 2 takes a 100% width and will grow or shrink depending on your action.

flex:1 1 0;

1

2

Notice the flex: 1; shortcut. It stands for flex-grow + flex-shrink + flex-basis as example with someClass below.

Flexbox CHEATSHEET