← Back to Tools

Flexbox Playground

Visual sandbox — tweak every flex property live, click items to style them individually, copy production CSS.

Presets:

Container Properties

flex-direction row

flex-wrap nowrap

justify-content flex-start

align-items stretch

align-content normal

gap 8px

padding 14px

Live Preview

5 items

Item Properties — click an item to select

flex-grow

flex-shrink

flex-basis

align-self

order

min-width

Generated Code

Flexbox Quick Reference

The properties you'll actually use in production — with when and why.

justify-content vs align-items

justify-content controls the main axis (horizontal by default). align-items controls the cross axis (vertical by default). Flip both when flex-direction: column.

flex: 1 shorthand

Equivalent to flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Use it to make items share available space equally. flex: auto uses the item's own size as basis instead.

align-content vs align-items

align-content only works when flex-wrap: wrap is set and there are multiple rows. It distributes space between rows. align-items works within each row.

The Holy Grail Center

To perfectly center anything: display: flex; justify-content: center; align-items: center. Works for both single items and groups. Add min-height to give the container space.