Flexbox playground

← All tools

Tweak flex container properties and per-item overrides, watch the layout change live, and copy the CSS when it looks right.

~~~

Container

flex-direction

justify-content

align-items

flex-wrap

align-content

gap (px)

Items

items (max 10)

Click an item in the preview to edit its flex properties.

Preview

Item overrides

flex-grow

flex-shrink

flex-basis

align-self

order

~~~

Generated CSS

Everything runs in your browser. The preview box uses the newspaper theme; your copied CSS can style items however you want.

~~~

About this tool

Flexbox is the go-to layout mode for one-dimensional alignment — a row of cards, a vertical stack, a navbar with spaced items. This playground lets you flip the main properties without writing CSS by hand, see what each knob does, and copy the result into your project.

Click any numbered item to set per-item overrides like flex-grow or order. Only non-default values appear in the generated CSS.

~~~

A guide to CSS Flexbox — the full tutorial
How to center an item with Flexbox
How to stick an item to the bottom with Flexbox
CSS centering — flexbox and other methods