PapaTools

Free CSS Flexbox Playground

Container

1
2
3

Items (3)

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;

Something not working? Report a problem

About the Flexbox Playground

Experiment with every flexbox property — direction, wrap, justify-content, align-items and more — with a live preview and copy the generated CSS, all in your browser.

How to use the Flexbox Playground

  1. 1Adjust the container properties — flex-direction, flex-wrap, justify-content and align-items.
  2. 2Use the item controls to set flex-grow, flex-shrink and flex-basis on each child.
  3. 3Watch the live preview update instantly as you change any property.
  4. 4Copy the generated CSS for the container and paste it into your project.

Frequently asked questions

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout mode that makes it easy to arrange items in a row or column, distribute space, and align elements — even when their sizes are unknown or dynamic.

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

justify-content controls alignment along the main axis (the direction of flex-direction). align-items controls alignment along the cross axis — perpendicular to the main axis.

When should I use flex-wrap?

Use flex-wrap: wrap when you want items to move to the next line instead of shrinking to fit. This is the basis of most responsive flex-based grids.

Is this tool client-side only?

Yes — all rendering happens in your browser. No data is sent to a server.

More design tools

View all
CSS Gradient GeneratorBuild linear, radial or conic CSS gradients visually — add colour stops, set direction and angle, get instant preview and copy the ready-to-paste CSS, all in your browser.Box Shadow GeneratorCreate single or layered CSS box shadows with live controls for offset, blur, spread, colour and inset — preview on a card and copy the CSS in one click.Color Palette GeneratorGenerate a 5-colour palette from a seed colour (complementary, analogous, triadic and more) or extract dominant colours from any image — copy hex/RGB/HSL or download as a PNG swatch sheet.Contrast CheckerCheck foreground/background colour contrast against WCAG 2.1 AA and AAA — live preview text on the chosen background with a one-click fix for failing combinations.