Diffrient types of justify-content properties in CSS:
1)normal : "Normal-alignment."
2)space-between : "Distribute items evenly The first item is flush with the
"start,the last is flush with the end."
3)space-around : "Distribute items evenly Items have a half-size space.
4)space-evenly : "Distribute items evenly Items have equal space around them.
5)stretch : "Distribute items evenly Stretch 'auto'-sized items to fit.
6)center : "Pack items around the center
7)flex-start : "Pack flex items from the start
8)flex-end : "Pack flex items from the end
9)more... ('upvote please!')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.
(Note: The X and Y axis / alignment direction can change depending
if you are using flex-direction: row or column)
1. justify-content: Horizontal-X-axis
Alignment & Spacing along primary axis (X-axis)
flex-start; Align children horizontally left
flex-end; Align children horizontally right
center; Align children horizontally centered (amaze!)
space-between; Distribute children horizontally evenly across
entire width
space-around; Distribute children horizontally evenly across
entire width (but with space on the edges
2. align-items: Vertical-Y-axis
Alignment only along secondary axis (Y-axis)
flex-start; Align children vertically top
flex-end; Align children vertically bottom
center; Align children vertically centered (amaze!)
baseline; Aligned children vertically so their baselines align
(doesn't really work)
stretch; Force children to be height of container (great for columns)
See it in action:
http://codepen.io/enxaneta/full/adLPwv/