Do you even [Flexbox] bro?

I. DEFINITION

The first step in the implementation of the flex layout is to define the display type to flex inside the parent element.

.container {
  display: flex;
}

II. PARENT PROPERTIES

Here is a list of parent properties that can be use with the flexbox layout.

1. [JUSTIFY-CONTENT]

Align flex items along the X axis.

flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.

.container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

2. [ALIGN-ITEMS]

Align flex items along the Y axis.

flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container.

.container {
  display: flex;
  align-items: flex-start | flex-end | center | baseline | stretch;
}

3. [FLEX-DIRECTION]

Define the direction of the main axis.

row: Items are placed the same as the text direction.
row-reverse: Items are placed opposite to the text direction.
column: Items are placed top to bottom.
column-reverse: Items are placed bottom to top.

.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

4. [FLEX-WRAP]

Specify whether flex items are forced on a single line or can be wrapped on multiple lines.

nowrap: Every item is fit to a single line.
wrap: Items wrap around to additional lines.
wrap-reverse: Items wrap around to additional lines in reverse.

.container {
  display: flex;
  flex-wrap: no-wrap | wrap | wrap-reverse;
}

5. [FLEX-FLOW]

Shorthand property for flex-direction and flex-wrap.

.container {
  display: flex;
  flex-flow: [row | row-reverse | column | column-reverse]  [no-wrap | wrap | wrap-reverse]
}

EXTRA PARENT PROPERTY

A little bonus property that the parent can hold.

6. [ALIGN-CONTENT]

Determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.

flex-start: Lines are packed at the top of the container.
flex-end: Lines are packed at the bottom of the container.
center: Lines are packed at the vertical center of the container.
space-between: Lines display with equal spacing between them.
space-around: Lines display with equal spacing around them.
stretch: Lines are stretched to fit the container.

.container {
  display: flex;
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

III. CHILDREN PROPERTIES

1. [ALIGN-SELF]

Align the specified item along the X axis.

flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container.

.container {
  display: flex;
}
.item {
  align-self: flex-start | flex-end | center | baseline | stretch;
}

2. [ORDER]

Specify the order of the specified flex item.

... Default position -n number.
-1: Default position -1.
0: Default position.
+1: Default position +1.
... Default position +n number.

.container {
  display: flex;
}
.item {
  order: ..., -1, 0, 1, ...;
}

3. [FLEX-GROW]

Expand items without determining the width if the child.

1:: Default value.
2:: Width grows 2x times.
...: Width grows nx times.

.container {
  display: flex;
}
.item {
  flex-grow: 2;
}

4. [FLEX-SHRINK]

Allow an item to shrink if the flex container is too small.

1: Default value.
2:: Item shrinks 2x times.
...: Item shrinks nx times.

.container {
  display: flex;
}
.item {
  flex-shrink: 2;
}

5. [FLEX-BASIS]

Set the initial size of the flex item before shrinking or growing it.

10px: Initial size of the flex item.

.container {
  display: flex;
}
.item {
  flex-basis: 10px;
}

EXTRA CHILDREN PROPERTY

There is a simplified property for the last three properties mentioned before, hope you enjoy the extra tip.

6. [FLEX]

Flex shorthand that controls the flex-grown, flex-shrink and flex-basis in one line. Used to control the fill rate of the extra space.

1: Item grows 1x times.
0: Item shrinks 0x times.
10px: Initial size of the flex item.

.container {
  display: flex;
}
.item {
  flex: 1 0 10px;
}

Resources

Flexbox Froggy - Learn while playing!
freeCodeCamp - Initiation to web development.