CSS Flexbox Generator

Visual flexbox playground. Toggle properties, see live preview, copy the CSS.

LIVE PREVIEW

Container Properties

flex-direction

justify-content

align-items

flex-wrap

align-content

gap: 10px

3 items

Select an item to edit its individual properties:

flex-grow: 0

flex-shrink: 1

flex-basis

order: 0

align-self

Lifetime Pass ($99.99) gets every tool we build. Or resell them all under your brand from $99.