justify content and align items flexbox code example

Example 1: flexbox center and space between

//You have to give an automatic margin to all the items inside the flex.
.flexbox {
       display: flex;
       justify-content:  space-between;
    }
    
    .flex-item {
       margin: auto;
    }

Example 2: justify-content vs align-items

(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/