Flexbox Playground
Experiment with every CSS flexbox property in a live preview and copy the generated CSS.
Container
Selected item
How it works
This flexbox playground turns the CSS flexbox properties into knobs you can turn. Pick a
flex-direction, change justify-content and align-items,
add a gap, and the preview box above re-lays-out instantly so you can see exactly
what each value does — the fastest way to learn how to center a div or space a row of cards.
Any single item can be customised too: give it flex-grow so it fills the leftover
space, set a flex-basis, override align-self, or change its
order. The generated CSS underneath always matches the preview, so you can copy it
straight into your stylesheet or download it as a .css file.
align-content is only emitted when flex-wrap is on, because it has no
effect on a single-line flex container. Everything runs in your browser with plain JavaScript —
no accounts, no ads, and nothing you build is sent anywhere.
Frequently asked questions
How do I center a div with flexbox?
Set the parent to display: flex, then choose justify-content: center to center along the main axis and align-items: center to center along the cross axis. Pick both values in the playground above and the preview box centres its items immediately — the generated CSS is the exact rule you can paste into your stylesheet.
What is the difference between justify-content and align-items?
justify-content positions items along the main axis (horizontally when flex-direction is row, vertically when it is column), while align-items positions them along the cross axis. Switching flex-direction in the playground swaps which axis each property controls, which is the quickest way to see the difference. align-content is a third property that only applies when flex-wrap is on and there are multiple lines.
Can I control individual flex items, not just the container?
Yes. Choose an item in the "Selected item" row and set its flex-grow, flex-shrink, flex-basis, align-self or order. Only the properties you actually change are written out, as a scoped rule such as .container > .item-2, so the generated CSS stays short and ready to copy or download as a .css file. Everything is generated in your browser — nothing is uploaded.