With just a few lines of code. The display blocks can load as Flex Blocks with a Flex-Direction.

When setting the parent element for Flexbox to display: flex.
The children elements will automatically align left-to-right.

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

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

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

Flex-Direction = Row-Reverse

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

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

Flex-Direction = Column Reverse

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

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

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;}