devtools
🔒 Local processing
Local developer utility

CSS Flexbox Playground

Adjust direction, alignment, and spacing in a live Flexbox preview, then copy the CSS. Your input stays in your browser while you work.

Flexbox Playground🔒 Processed locally
A CSS length such as 16px, 1rem, or 5%.
123

How to use Flexbox Playground

Complete the labeled fields above, choose an action, and inspect the result before copying or downloading it.

Processing runs locally in this browser. No input is uploaded or sent to a conversion service.

Inputs

  • Direction
  • Justify content
  • Align items
  • Gap: A CSS length such as 16px, 1rem, or 5%.