What Flexbox properties can I control?

You can set flex-direction, flex-wrap, justify-content, align-items, and gap on the container. Each child item has individual flex-grow, flex-shrink, and flex-basis controls.

Can I add and remove child items?

Yes. Click 'Add Child Item' to add more flex children, or click the trash icon on any child to remove it.

How do I copy the CSS code?

Click the copy button next to the generated CSS output at the bottom of the tool to copy both container and child CSS.

Is this tool useful for learning Flexbox?

Absolutely. The live preview updates instantly as you change properties, making it a great way to understand how each Flexbox property affects layout.

CSS Flexbox Playground

Experiment with Flexbox properties visually and get the CSS code.

Direction

Wrap

Justify Content

Align Items

Gap8px

Preview

Child Items

Grow

Shrink

Basis

Grow

Shrink

Basis

Grow

Shrink

Basis

/* Container */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

/* Children */
.child-1 { flex: 0 1 auto; }
.child-2 { flex: 0 1 auto; }
.child-3 { flex: 0 1 auto; }

How to Use CSS Flexbox Playground

Step 1

Set container properties like direction, wrap, and alignment.

Step 2

Adjust the gap between flex items using the slider.

Step 3

Add or remove child items and set their flex-grow, shrink, and basis.

Step 4

Copy the generated CSS code with one click.

Features

Full control over flex container properties.

Per-child flex-grow, flex-shrink, and flex-basis controls.

Add and remove child items dynamically.

Live preview that updates in real-time.

Complete CSS output for container and children.

FAQ

: You can set flex-direction, flex-wrap, justify-content, align-items, and gap on the container. Each child item has individual flex-grow, flex-shrink, and flex-basis controls.
: Yes. Click 'Add Child Item' to add more flex children, or click the trash icon on any child to remove it.
: Click the copy button next to the generated CSS output at the bottom of the tool to copy both container and child CSS.
: Absolutely. The live preview updates instantly as you change properties, making it a great way to understand how each Flexbox property affects layout.