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, and 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.