CSS Flexbox Cheat Sheet

Interactive visual guide to CSS Flexbox. Click the values to see them in action.

display: flex

Enables flexbox on the container. All direct children become flex items.

.container { display: flex; }

flex-direction

Sets the main axis direction for flex items.

justify-content

Aligns items along the main axis.

align-items

Aligns items along the cross axis.

flex-wrap

Controls whether items wrap to new lines.

gap

Sets the spacing between flex items.

Live Preview