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.

What is the CSS Flexbox Playground?

Free CSS Flexbox playground — change flex-direction, justify-content, align-items, wrap and gap, watch a live preview, and copy the generated flexbox CSS. Runs entirely in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Flexbox Playground

Name: CSS Flexbox Playground
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

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.

Common layout recipes

Navbar (items pushed to edges, vertically centred):

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

Perfect centre (single item in the middle of a container):

display: flex;
justify-content: center;
align-items: center;

This pattern works for centring a modal, a hero badge, or an icon inside a button — combine with a minimum height on the container.

Card row that wraps on smaller screens:

display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;

Child cards get a flex: 1 1 280px to set a minimum width before wrapping; the flex container then distributes remaining space among those on each line.

Vertical sidebar menu:

display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;

`justify-content` values at a glance

justify-content	End gaps	Gaps between items
flex-start	items packed at start	none
center	items packed at centre	none
flex-end	items packed at end	none
space-between	none	equal
space-around	half-size	equal (double between)
space-evenly	equal	equal

When to reach for flexbox vs grid

Use flexbox when you have a single row or column of items and want the items themselves to determine the distribution. It excels at navigation bars, button groups, form rows, and any layout where one axis is the natural primary axis.

Use CSS grid when you need precise control over both rows and columns simultaneously — product grids, page templates, dashboards where cells must align across rows and columns. Grid also makes it straightforward to place items into specific named areas.

The two can nest: a grid layout can contain flex rows inside its cells, and a flex container can hold a grid child.

Everything runs in your browser — nothing is uploaded.