Flexbox Playground

All tools

Experiment with CSS Flexbox properties on live items and copy the generated layout CSS.

Preview Click an item to edit it
Generated CSS
—

Everything runs in your browser — nothing is uploaded.

Container
12px
Items
0
Selected item

About Flexbox Playground

The Flexbox Playground is a hands-on sandbox for CSS flexbox. Set the container properties — flex-direction, flex-wrap, justify-content, align-items, align-content and gap — and watch up to 12 live items reflow in the preview as you change each value. It is the quickest way to internalize what each property actually does.

Items are individually editable: click one to select it and adjust its flex-grow, flex-shrink, flex-basis, align-self and order. Seeing one item grow to swallow free space while its siblings hold their width teaches the flex sizing model faster than any diagram.

The playground generates clean CSS for the container and any items with non-default settings — copy it straight into your stylesheet. Everything runs in your browser with nothing uploaded, and a reset button returns you to a clean slate.

How to use Flexbox Playground

  1. Set the container’s flex-direction, wrap, justify-content, align-items, align-content and gap.
  2. Add or remove items — between 2 and 12 — to mirror your real component.
  3. Click an item and tune its grow, shrink, basis, align-self and order.
  4. Watch the live preview update with every change.
  5. Copy the generated CSS and paste it into your project.

Frequently asked questions

flex-grow distributes leftover space: an item with grow 2 receives twice the extra space of one with grow 1. flex-shrink works in reverse when space is short. Both are ratios between siblings, not absolute sizes.

align-items positions items along the cross axis within their line. align-content spaces multiple wrapped lines within the container — it only has a visible effect when flex-wrap produces more than one line.

Every flex item defaults to order 0; items are laid out from the lowest order to the highest. Changing an item’s order moves it visually without touching the HTML — the DOM sequence, and thus screen-reader order, stays the same.

Yes. The generated CSS covers the container rules plus a selector for each item whose grow, shrink, basis, align-self or order differs from the default, so you can paste a complete, working layout.

Yes — free, no sign-up, and entirely client-side. Your experiments never leave the browser tab.
Share this
Related Tools
Email Signature Builder Design a professional HTML email signature from 30 templates, customise it and save it. Free
Icon to PNG Convert Bootstrap Icons, Font Awesome and more into custom PNG images — free, in your browser. Free
App Icon Generator Generate a complete, store-ready app icon set for the App Store and Google Play — premium gradient, mesh and pattern backgrounds, built from your logo. Free
Favicon Generator Build a complete favicon package from a logo, a font icon or a monogram — favicon.ico, modern PNGs, the Apple touch icon, PWA icons, a web manifest and the HTML snippet. Free
CSS Box Shadow Generator Craft layered CSS box-shadows with live sliders for offset, blur, spread, color, opacity and inset — preview on a real element and copy ready-to-paste CSS instantly. Free
CSS Border Radius Generator Visually craft CSS border-radius with live preview and copy production-ready code. Free
Popular searches
flexbox playground css flexbox generator flex container generator justify-content align-items tool css flex layout generator flexbox visualizer flexbox code generator
Need help?
Found an issue with this tool? Let our team know.
Report an issue

Add this free tool to your own website — copy and paste the code below.