Skip to content
Free Tool Arena

Developer Utilities · Free tool

Flexbox Playground

Experiment with justify-content, align-items, direction, and wrap. See the CSS update live as you drag controls.

Updated April 2026
1
2
3

Children (3/8)

#1
#2
#3

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}
.container > :nth-child(1) {
  flex: 0 1 auto;
}
.container > :nth-child(2) {
  flex: 0 1 auto;
}
.container > :nth-child(3) {
  flex: 0 1 auto;
}

What it does

Experiment with every common flexbox property — justify-content, align-items, flex-direction, flex-wrap, gap, and item sizing — with an interactive demo. As you change controls, the CSS rule builds live in the output panel.

For grid instead use grid layout generator. For visual polish, box shadow generator and border radius generator.

How to use it

  1. Toggle flex-direction, justify-content, align-items.
  2. Change item count and per-item flex basis.
  3. Watch the live preview update.
  4. Copy the generated parent + child CSS.