Flexbox Playground

Change any flexbox property and watch real flex items rearrange instantly. Set the container's direction, wrapping, alignment and gap, then select an individual item to give it its own grow, shrink, basis, order or align-self. The CSS for the container and every customised item is written out underneath, ready to copy.

CSS & Frontend Runs in your browser

Experiment with CSS Flexbox

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

flex-direction

flex-wrap

justify-content

align-items

align-content (wrapped lines)

gap

Number of items

Container height

Selected itemOr click an item in the preview.

flex-grow (selected item)

flex-shrink (selected item)

flex-basis (selected item)auto, 0, 120px, 25% …

order (selected item)

align-self (selected item)

How to Use the Flexbox Playground

Choose the container settings: direction, wrap, justify-content, align-items, align-content and gap.
Pick an item from Selected item or click it in the preview.
Change that item's grow, shrink, basis, order or align-self.
Copy the generated CSS; only properties that differ from the defaults are written for items.

About This Tool

Developers and students learning flexbox, and anyone debugging why items will not centre, wrap or share space the way they expect.

Input: Flex settings · Output: CSS.

Features and Limitations

Features

Real flex layout rendered by your browser, not a simulation.
Per-item settings for up to 12 items, remembered while you switch between them.
Items are buttons with a pressed state, so the preview works with keyboard and screen readers.
Invalid flex-basis values are rejected with a clear message.

Limitations

Items contain short labels of different lengths; your real content may size differently.
Visual order (order, row-reverse) does not change keyboard or reading order, so use it carefully on real pages.
Settings are not saved after you leave the page.
Results are computed in your browser; nothing you enter is sent to a server.

Example

justify-content: space-between with five items spreads them across the row with the first and last items touching the edges; giving item 3 flex-grow: 1 makes it absorb all the free space instead.

Frequently Asked Questions

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

justify-content distributes items along the main axis (horizontal for row), and align-items positions them on the cross axis (vertical for row). Switching to column swaps the two.

Why does align-content do nothing?

align-content only affects containers with more than one line, so it needs flex-wrap: wrap and enough items (or a narrow container) to create several lines.

What does flex: 1 mean?

It is shorthand for flex-grow: 1, flex-shrink: 1 and flex-basis: 0%, so items share the free space equally regardless of their content size.

Should I use flexbox or grid?

Flexbox suits one-dimensional rows or columns where content size matters; grid suits two-dimensional layouts with rows and columns that line up. Try both with the CSS Grid Generator.