Flexbox Playground

Try flex settings and copy the CSS.

Runs in your browser. Nothing is uploaded — your input is processed on this device and discarded when you close the tab.

Flexbox Playground

Box 1
Box 2
Box 3

How to use this tool

  1. Choose a flex direction, justification and alignment and a gap in pixels.
  2. Press Generate to apply the settings to the preview boxes and show the CSS.
  3. Copy the CSS snippet into your own stylesheet.

Worked example

For direction row, justify-content center, align-items center and a gap of 16, the CSS is: display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 16px;

What this tool does not do / Limits

This tool previews one flex container with three plain boxes. It does not cover wrapping, flex-grow, responsive breakpoints, or real page content.

Frequently asked questions

What is the difference between justify-content and align-items?

Justify-content positions items along the main direction (left to right for a row), while align-items positions them across it (top to bottom for a row).

Why does stretch need a height?

Stretch only shows when the container is taller than the boxes; with a short container the boxes already fill it.

Related tools

JSON Studio

Format, validate, minify, query and compare JSON in your browser, with precise line-and-column errors.

Live

Regex Tester

Test patterns against sample text with match highlighting, capture groups and a safe one-second timeout.

Live

Security Header and DNS Checker

Check HSTS, CSP and other security headers, TLS details, and DNS/email authentication records (SPF, DKIM, DMARC).

Live