Flexbox 1 - Horizontal Alignment

By adding display : flex we turn an element in to a flexbox parent. Then we can use the justify-content property to set how the children are spaced vertically, otherwise known as the cross axis.

1-1. justify-content : flex-start;

1-2. justify-content : center;

1-3. justify-content : flex-end;

1-4. justify-content : space-between;

1-5. justify-content : space-around;