# 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.

URL: https://uttir.com/css-flexbox-playground
Categories: web-tools, developer-tools
Privacy: All rendering happens locally. The CSS you generate never leaves your browser.

## About

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

1. **Adjust container controls** — Set flex-direction, flex-wrap, justify-content, align-items, align-content, and gap.
2. **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.
3. **Add or remove items** — Use the + and × buttons to add or remove items from the flex container.
4. **Copy the generated CSS** — Copy the generated CSS from the right-hand panel.

## FAQ

### What is flexbox?

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.

### flex vs inline-flex?

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.

### What does flex: 1 mean?

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0. The item grows to fill available space, can shrink if needed, and starts from a 0 base. Multiple flex: 1 items share the space equally.

## Related tools

- [CSS Grid Playground](https://uttir.com/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](https://uttir.com/css-gradient-generator) — Build linear and radial CSS gradients visually. Pick colors, drag stops, copy the CSS.
- [CSS Minifier](https://uttir.com/css-minifier) — Shrink CSS by stripping comments, collapsing whitespace, and tightening punctuation. See byte savings live.
- [Color Picker](https://uttir.com/color-picker) — Pick any color and copy it as HEX, RGB, or HSL.

---

For the full HTML page with the live tool, visit https://uttir.com/css-flexbox-playground.
This file is the markdown rendering at https://uttir.com/css-flexbox-playground.md. See https://uttir.com/llms.txt for a site-wide summary.