Skip to content
I Hate Online Tools

Flexbox playground

Tweak flex container and item props; copy the CSS.

Runs in this tab. The file stays here.

Preview
1
2
3
CSS
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
gap: 8px;

This runs in your browser. Nothing is uploaded.

About Flexbox playground

Flexbox playground for direction, justify-content, align-items, wrap, and gap — with live preview and CSS copy.

Flexbox docs are excellent and still easy to mix up under deadline. A playground with direction, justify, align, wrap, and gap, plus a preview of items rearranging, is faster than re-reading the whole MDN page for the tenth time.

Change the controls and watch the demo items respond. Copy the flex container rules when the layout matches what you need. This does not replace learning Flexbox; it shortens the edit-refresh loop while you learn or ship.

For two-dimensional tracks, use the grid generator. For decorative polish on the items themselves, border-radius and box-shadow are next door.

How to use Flexbox playground

  1. 1Set flex-direction, justify-content, align-items, flex-wrap, and gap.
  2. 2Watch the preview items rearrange.
  3. 3Copy the container CSS into your project.

What it won't do

  • Container-oriented playground, not a full design system exporter.
  • Demo content is placeholder boxes.

Common questions

Does this generate CSS for flex items as well as the container?

The focus is container-level controls. Item-level grow/shrink/order can be added in your own stylesheet as needed.

When should I use Grid instead of Flexbox?

When you need rows and columns as a two-dimensional template. Flex shines for one-dimensional distribution and wrapping bars.

Is the preview using my site’s styles?

No. Isolated demo items on this page only.

Related tools

Why this one doesn't upload your file

There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation

Install the app