Layout controls

Tune the container, then select any item to edit it independently.

flex-direction

flex-wrap

main axis

cross axis

justify-content

align-items

align-content

row-gap 16px

column-gap 16px

padding 12px

min-height 420px

Corner radius

Container color

One click, fully editable

Item 1

Label

flex-grow 0

flex-shrink 1

flex-basis

order

align-self

Minimum size 72px

Item color

Item rule of thumb

flex: 1 1 0 makes siblings share available space. Use a non-zero basis when an item should begin from a preferred size.

Live preview Click an item to inspect it

Generated output

Production-friendly code, always synchronized with the preview.

Undo change⌘ Z

Redo change⇧ ⌘ Z

Add itemA

Delete selected⌫

Copy outputC