I use CSS's Flexbox all the time, but not enough to actually memorise all the options! I created this cheatsheet as a reference for myself to make it quick and easy to develop flexbox layouts.
CanIUse says this modern syntax of Flexbox has about 98% support in modern browsers, across Desktop and Mobile.
Terminology
- Flex container — the parent element
- Flex items — children elements, wrapped by the parent
- Main axis — horizontal axis, from left to right
- Cross axis — vertical axis, from top to bottom
Flex container options
- display — flex, inline-flex
- flex-direction — row, row-reverse, column, column-reverse
- align-items (vertical alignment/stretching) — stretch, flex-start, flex-end, center, baseline
- justify-content (horizontal alignment) — flex-start, flex-end, center, space-between, space-around
- align-content — stretch, flex-start, flex-end, center, space-between, space-around
- flex-wrap (keep items on one line, or not?) — nowrap, wrap, wrap-reverse
Flex item options
- align-self — (vals as per align-items)
- flex (relative size of item) — integer
- order — [integer]