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.

X LinkedIn Reddit Email

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?

O que é 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.

Como usar

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.

Perguntas frequentes

What is flexbox?

flex vs inline-flex?

What does flex: 1 mean?

Guias relacionados

How to Build a CSS Grid Layout (with Real Examples)

A practical guide to CSS Grid: when to use it (and when flexbox is the better choice), the six properties that matter, how named lines and areas work, and how to experiment with a live layout in your browser before committing it to a stylesheet.

The 8 Best Free CSS Tools in 2026 (No Signup, No Upload)

A curated list of the best free CSS tools: gradient generators, box-shadow builders, flexbox / grid playgrounds, minifiers, and animation builders. All run in your browser.

How to Build a CSS Flexbox Layout (with Real Examples)

A practical guide to flexbox: when to use it (and when not to), the six properties that matter, the common gotchas with align-items and flex-basis, and how to experiment with a live layout in your browser before committing it to a stylesheet.

Ferramentas relacionadas

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.

Seletor de Cor

Escolha uma cor de uma imagem e obtenha os valores HEX, RGB, HSL e CMYK. Grátis, no seu navegador, sem upload.

Last reviewed: 2026-09-25