With one line of code (flex-direction: column;) the child content now loads in columns (and not a row).

Flex-Direction = Row-Reverse

Using Flex-Direction to Row-Reverse the order the row content loads.

Flex-Direction = Column Reverse

Using Flex-Direction to Column-Reverse the order the Column content loads.

Flex-Direction = Justify Content

Maybe one of the most popular uses for Flex Direction. Justify Content to evenly load, or center, or set to the right or left. The Justify Content is a power layout tool.

Flex-Direction = Fix Align Items

Using the Cross Axis (top to bottom). The Fix Align Items is a powerful way to justify content and align items together.

• flex-start
• flex-end
• center
• baseline
• stretch (height must be set to auto).

Flex-Direction = Align Self

Align-self allows the alignment of a single item to be targeted and changed.

Flex Wrap

Flex Wrap works to fit all elements in one row. Unless the Flex Wrap property is adjusted by the following.

flex-wrap: nowrap

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

flex-wrap: wrap

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

flex-wrap: wrap-reverse

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

Flex Flow

Flex flow combines to use of flex-direction and flex-wrap into the Flex Flow property.

• flex-flow: column wrap

Align Content with Flexbox

Align Content only impacts content on the cross axis that is more than one line long using the following options.

• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch

Vertically Centering with Flexbox

.parent {display:flex; align-items: center;}