CSS Flexible box layout module - part 3 - Positioning on main and cross axis

Positioning flex items alongside main axis we should to remember this image:

It means we should forget about float and use just justify-content property:

justify-content: flex-start; /* aligns flex item to main start */
justify-content: center; /* centers flex item alongside main axis */
justify-content: flex-end; /* aligns flex item to main end */
justify-content: space-between; /* puts space between flex items and spreads them on all available space*/

justify-content: space-around; /* puts space around flex items and spreads them on all available space */

For cross-axis it is similar as for main axis, but some properties change:

align-items: flex-start; /* aligns flex item to cross start */
align-items: center; /* centers flex item alongside cross axis*/
align-items: flex-end; /* aligns flex item to cross end */

align-items: baseline; /* all flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line. */

align-items: stretch; /* flex items are stretched such as the cross-size of the item's margin box is the same as the line while respecting width and height constraints. */