What is Flexbox Playground?

Learn and experiment with CSS Flexbox interactively.

Is Flexbox Playground free?

Yes. Free, no signup, no ads, no data collection. Runs entirely in your browser.

Does Flexbox Playground upload my data?

No. All processing happens client-side in your browser. Nothing is uploaded to a server.

Who built Flexbox Playground?

Kesava (https://iamkesava.com), part of the Kami Studios little tools collection at https://tools.iamkesava.com.

What is Flexbox Playground?

Learn and experiment with CSS Flexbox interactively.

Is Flexbox Playground free?

Yes. Free, no signup, no ads, no data collection. Runs entirely in your browser.

Does Flexbox Playground upload my data?

No. All processing happens client-side in your browser. Nothing is uploaded to a server.

Who built Flexbox Playground?

Kesava (https://iamkesava.com), part of the Kami Studios little tools collection at https://tools.iamkesava.com.

What is the Flexbox Playground for?

Learning and experimenting with CSS Flexbox interactively. Adjust flex-direction, justify-content, align-items, flex-wrap, gap, and individual item flex values via controls and see the result update live.

Can I add and remove flex items in the playground?

Yes. Add up to 12 items and control each item's flex-grow, flex-shrink, flex-basis, align-self, and order independently.

Does it output CSS I can copy?

Yes. The current layout configuration generates the full CSS for the container and each item class, ready to paste into your project.

Is there a visual guide to each property?

Each control includes a one-line description of what the property does, so it doubles as an interactive Flexbox reference.

Flexbox

Live playground for direction, wrap, justify, align and per-item flex

Controls

Presets

Items3

Direction

Wrap

Justify

Align items

Row gap8px

Column gap8px

Output

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

.flex-item-1 {
  flex: 0 1 auto;
}

.flex-item-2 {
  flex: 0 1 auto;
}

.flex-item-3 {
  flex: 0 1 auto;
}

About this tool

What is the Flexbox Playground for?: Learning and experimenting with CSS Flexbox interactively. Adjust flex-direction, justify-content, align-items, flex-wrap, gap, and individual item flex values via controls and see the result update live.
Can I add and remove flex items in the playground?: Yes. Add up to 12 items and control each item's flex-grow, flex-shrink, flex-basis, align-self, and order independently.
Does it output CSS I can copy?: Yes. The current layout configuration generates the full CSS for the container and each item class, ready to paste into your project.
Is there a visual guide to each property?: Each control includes a one-line description of what the property does, so it doubles as an interactive Flexbox reference.

About

Tap an item in the preview (or pill in the panel) to edit per-item flex properties. Use the reorder arrows in the item panel to change DOM order.

Main axis is horizontal; the cross axis runs perpendicular.

Related tools

Border Radius

Visualize and generate CSS border-radius values.

◱

Border Radius

Visualize and generate CSS border-radius values.

Open →

Box Shadow

Design CSS box shadows with visual controls.

▣

Box Shadow

Design CSS box shadows with visual controls.

Open →

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

⬡

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

Open →

Color Palette

Generate harmonious color palettes with multiple harmony rules.

🎨

Color Palette

Generate harmonious color palettes with multiple harmony rules.

Open →

View all tools →