Flexbox Cheat Sheet

• display: flex or display: inline-flex: creates a flex context (or an inline flex context) for direct children of this element
• flex-direction determines the main and cross axis for the container, valid values are:

- row (default): horizontal, in the direction of writing (left to right for English)
- row-reverse: horizontal, in the opposite direction of writing (right to left for English)
- column: vertical, top to bottom

- row (default): horizontal, in the direction of writing (left to right for English)
- row-reverse: horizontal, in the opposite direction of writing (right to left for English)
- column: vertical, top to bottom
- column-reverse: vertical, bottom to top

• flex-wrap determines if flex items will try to fit in one line, valid values are:

- nowrap (default): all flex items will be on one line

From 30-seconds-of-code: flexbox-cheatsheet