CSS Flexbox Playground

Free interactive CSS Flexbox playground. Experiment with all flex container and item properties visually. See live results and copy the CSS code.

May 16, 2025 · 1 min · 109 words · Productivity Works Editorial | Translations:

Experiment with all Flexbox properties visually. Click an item to adjust its individual properties. Copy the generated CSS anytime.

Items

3 items

Container Properties

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

8px

Item Properties (Item 1)

order

flex-grow

flex-shrink

flex-basis

align-self

Live Preview

Generated CSS

CSS Clip-Path → CSS Clip-Path Maker

CSS Specificity → CSS Specificity Calculator