Built-in toolFree · No signup

Flexbox Playground

Interactively configure every CSS flexbox property. Set flex-direction, wrap behaviour, justify-content, align-items, and gap on the container. Click any item to adjust its flex-grow, flex-shrink, and flex-basis individually. The live preview and CSS output update in real time.

Live Preview

1

2

3

Click a box to select it and edit its flex properties below.

Container

flex-direction

flex-wrap

justify-content

align-items

gap12px

Items (3/6)

CSS Output

.container {  display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: flex-start;  align-items: stretch;  gap: 12px;} /* Individual items (if all same) */.item {  flex: 0 1 auto;}