CSS Flexbox is a one-dimensional layout system that distributes space along a single axis. Use it for navigation bars, card lists, centering content, and any layout that needs flexible items in a row or column.

display: flex makes the container a block (takes the full width). display: inline-flex makes it inline (only as wide as the content). Choose inline-flex when you want a flex container inside a sentence or next to other inline content.

CSS Flexbox Playground

Visual playground for CSS Flexbox. Adjust container and item properties with sliders, see the live layout update, and copy the generated CSS.

CSS Flexbox Playground — A visual editor for CSS Flexbox. Pick container properties (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) and item properties (flex-grow, flex-shrink, flex-basis, align-self, order) and see the layout update in real time. Copy the generated CSS when you are done.

All rendering happens locally. The CSS you generate never leaves your browser.

Was CSS Flexbox Playground useful?

What is css flexbox playground?

A visual editor for CSS Flexbox. Pick container properties (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) and item properties (flex-grow, flex-shrink, flex-basis, align-self, order) and see the layout update in real time. Copy the generated CSS when you are done.

Useful for learning flexbox, prototyping a layout before writing code, or debugging a flexbox issue. The generated CSS is plain — no preprocessor, no framework — and works in any modern browser.

How to use it

Adjust container controls

Set flex-direction, flex-wrap, justify-content, align-items, align-content, and gap.
Edit each item

Click any item in the preview to select it. Then adjust its flex-grow, flex-shrink, flex-basis, align-self, and order.
Add or remove items

Use the + and × buttons to add or remove items from the flex container.
Copy the generated CSS

Copy the generated CSS from the right-hand panel.

Frequently asked questions

What is flexbox?

flex vs inline-flex?

What does flex: 1 mean?

Related tools

CSS Grid Playground

Visual playground for CSS Grid. Define rows, columns, and gaps, place items by area or line number, and copy the generated CSS.

CSS Gradient Generator

Build linear and radial CSS gradients visually. Pick colors, drag stops, copy the CSS.

CSS Minifier

Shrink CSS by stripping comments, collapsing whitespace, and tightening punctuation. See byte savings live.

Color Picker

Pick any color and copy it as HEX, RGB, or HSL.