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

justify-content positions items along the main axis (the flex-direction), while align-items positions them along the cross axis. Swapping flex-direction swaps which axis each one controls.

When should I use flexbox instead of grid?

Flexbox is best for one-dimensional layouts — a single row or column of items. CSS Grid is better when you need to control rows and columns together in two dimensions.

Is anything uploaded?

No — the flexbox CSS is generated entirely in your browser.

What does flex-direction change?

flex-direction sets the main axis: row lays items left to right, column stacks them top to bottom, and the -reverse variants flip the order. It also decides which axis justify-content and align-items act on.

What is the difference between space-between, space-around and space-evenly?

All three distribute extra space along the main axis. space-between puts no space at the ends and equal gaps between items; space-around gives each item equal space on both sides (so end gaps are half the inner gaps); space-evenly makes every gap, including the ends, identical.

How do I centre items both horizontally and vertically?

Set justify-content: center and align-items: center on the flex container. With flex-direction: row this centres along both axes; the playground lets you confirm it visually before copying.

What does flex-wrap do?

flex-wrap: nowrap keeps all items on one line, shrinking them if needed. wrap lets items flow onto new lines when they run out of room, and wrap-reverse does the same but stacks the new lines in the opposite direction.

CSS Flexbox Playground

CSS Flexbox playground

This is a hands-on flexbox playground that generates ready-to-paste display: flex rules. It is for developers learning flexbox or fine-tuning a row or column of items — navbars, button groups, card rows, centred hero content. Change a property, watch the preview rearrange, and copy the exact CSS.

How it works

The playground sets five container properties and writes them out as a display: flex block. flex-direction chooses the main axis (row or column, optionally reversed). justify-content positions items along that main axis; align-items positions them along the cross axis — so swapping the direction swaps which control does what. flex-wrap decides whether items stay on one line or flow onto new lines, and gap sets the spacing between items. The preview is a live flex container using the same values, with the item count adjustable so you can test crowding and wrapping.

Example

With flex-direction: row, justify-content: space-between, align-items: center, flex-wrap: nowrap and gap: 8px, the tool outputs:

display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
gap: 8px;

This is the classic navbar pattern — items pushed to the edges, vertically centred, on a single line.

justify-content	End gaps	Between items
flex-start	items packed at start	none
center	items packed centre	none
space-between	none	equal
space-around	half-size	equal
space-evenly	equal	equal

Everything runs in your browser — nothing is uploaded.