Flexbox Playground

Tweak flex direction and alignment with a live preview. Free, runs entirely in your browser — no signup, and nothing you paste in is uploaded.

Almost all flexbox confusion is the main axis. `justify-content` works along the direction you set, `align-items` works across it, and switching `flex-direction` to column swaps which physical direction each one means — so the property that was centring horizontally is suddenly centring vertically.

The default nobody expects is `flex-shrink: 1`. Items are allowed to shrink below their content width, which is why a long unbreakable string blows out a layout and why a sidebar collapses when it should not. `flex-shrink: 0` on the item that must keep its size fixes more layouts than any other single declaration.