Flexbox playground
Change flexbox properties and watch the layout respond, then copy the CSS.
Learn flexbox by changing it
Flexbox is the workhorse of CSS layout, and the one-dimensional model is simple once it clicks: a container, a main axis, a cross axis, and a handful of properties that decide how items share space. Getting there from documentation alone is slow because the properties interact: justify-content and align-items swap meaning when the direction changes, and align-content only matters when items wrap.
This playground shows a live container with items you can add and remove. Choose a direction, wrapping, justification, alignment and gap, and the preview updates instantly alongside the exact CSS to copy. Notes under the result explain what you are looking at, such as which axis the justification is running along, or why align-content is doing nothing.
Common recipes
- Centered content: justify-content center, align-items center.
- Navbar with a logo on the left and links on the right: justify-content space-between, align-items center.
- Equal-height cards in a row: the default align-items: stretch.
- Wrapping tags or chips: flex-wrap wrap with a gap.
The sizes of items in the preview are intentionally varied so that alignment differences are visible. The generated CSS targets a .container class; rename it to suit your markup. Everything runs in your browser.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis (the direction of flex-direction), and align-items aligns them on the cross axis. With flex-direction: row, justify-content is horizontal and align-items is vertical; with column the two swap.
How do I center something with flexbox?
Set display: flex, justify-content: center and align-items: center on the parent. For vertical centering the parent also needs a height, for example min-height: 100vh.
What does align-content do?
It spreads whole lines of wrapped items along the cross axis. It has no effect when everything fits on a single line, which is why it does nothing with flex-wrap: nowrap.
When should I use grid instead?
Flexbox lays items out in one dimension, a row or a column. Use CSS grid when you need to control rows and columns together, such as page layouts and card galleries.