A Complete Guide to Flexbox

• The main axis is the axis running in the direction the flex items are laid out in (for example, as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
• The cross axis is the axis running perpendicular to the direction the flex items are laid out in. The start and end of this axis are called the cross start and cross end.
• justify-content controls where the flex items sit on the main axis.
• align-content controls where the flex items sit on the cross axis.

flex-direction

row|| row-reverse || column|| column-reverse

flex-wrap

nowrap|| row-reverse || column

order

• 1 || 0 ||1

flex-grow

0 ||1

flex-basis

flex shorthand

This is the shorthand for the flex-grow, flex-shrink and flex-basis properties combined.

flex: 2 1 30em;