display:
> flex <!-- Creates a flex-box container. Items in this container
become flex-box items. Useful for laying out elements in a single
row or column responsively. These items can have the following declerations
applied to them: -->
flex-direction: determines which direction is the main axis
> row <!-- Main axis is left to right -->
> row-reversed <!-- Main axis is right to left -->
> column <!-- Main axis is top to bottom -->
> column-reversed <!-- Main axis is bottom to bottom -->
flex-wrap: wraps content in flexcontainer if necessary
> nowrap (default)
> wrap
flex-flow: specifies both flex-direction and flex-wrap
> ex = flex-flow: row wrap
justify-content: determines how elements are positioned along main axis (again, main axis is set by flex direction)
> flex-start <!-- This is affected accordingly if main axis is reversed -->
> flex-end <!-- This is affected accordingly if main axis is reversed -->
> center
> etc.
align-items: determines how elements are positioned along the non main axis, the cross axis (again, main axis is set by flex direction)
> flex-start <!-- This is affected accordingly if main axis is reversed -->
> flex-end <!-- This is affected accordingly if main axis is reversed -->
> center
> etc.
> Note, align-items has a different meaning if display from above is NOT set to flex and is set to grid, ie (display: grid)
When items are wraped, you use flex-content to change how rows are positioned to each other
align-content:
> center
> space-between
> space-around
> etc.