CSS Flexbox Cheat Sheet

A quick reference for the most common Flexbox properties.

justify-content

Aligns items along the main axis (usually horizontal).

flex-start

Items pack toward the start line.

flex-end

Items pack toward the end line.

center

Items are centered along the line.

space-between

Items are evenly distributed; first item is on the start line, last item on the end line.

space-around

Items are evenly distributed with equal space around them.

space-evenly

Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Aligns items along the cross axis (usually vertical).

stretch

Stretch to fill the container (default).

flex-start

Items are placed at the start of the cross axis.

flex-end

Items are placed at the end of the cross axis.

center

Items are centered in the cross-axis.

baseline

Items are aligned such as their baselines align.

Establishes the main-axis, defining the direction flex items are placed.

row

Left to right (default).

row-reverse

Right to left.

column

Top to bottom.

column-reverse

Bottom to top.

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed.

nowrap

All flex items will be on one line (default).

wrap

Flex items will wrap onto multiple lines, from top to bottom.

wrap-reverse

Flex items will wrap onto multiple lines from bottom to top.