CSS Flexbox Playground

Experiment with flex container and item properties visually and copy the resulting CSS.

Runs in your browser. Your input is processed on your device and is not uploaded to our server.

flex-direction

flex-wrap

justify-content

align-items

align-content

gap (px)

Items

Click an item to edit its flex properties.

CSS

How to use the CSS Flexbox Playground

Change direction, wrapping, justification, alignment and gap.
Add items and set grow, shrink, basis and order per item.
Copy the CSS.

Flexbox lays items out in one dimension. justify-content distributes space along the main axis; align-items aligns items on the cross axis. For two-dimensional layouts use CSS Grid.

Frequently asked questions

Flexbox or Grid?

Flexbox for one-dimensional rows or columns of content; Grid for two-dimensional layouts.