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

justify-content positions items along the main axis — the direction set by flex-direction, so it controls horizontal spacing in a row and vertical spacing in a column. align-items positions items along the cross axis, the one perpendicular to flex-direction. Mixing them up is the most common flexbox bug: if your items are centered vertically but you wanted horizontal centering, you probably need the other property.

Why does align-items: stretch not seem to do anything?

stretch is the default, and it only has a visible effect when an item does not already have a fixed size on the cross axis. If every item has an explicit height (in a row) or width (in a column), there is nothing left to stretch. Remove the fixed size to see items fill the container.

What does flex-wrap actually change?

By default, flex items try to fit on a single line and shrink to make room, which can squash them below their natural size. Setting flex-wrap: wrap lets items that no longer fit drop onto a new line instead, each line laid out like its own flex container. wrap-reverse does the same thing but stacks new lines above instead of below.

Should I use gap or margin to space flex items?

Use gap. It puts space only between items, not around the outer edges, so you avoid the classic 'extra margin on the last item' cleanup. gap has been supported in every major browser's flexbox implementation since 2021, so there is no longer a compatibility reason to reach for margin instead.

How is flexbox different from CSS Grid?

Flexbox is one-dimensional — it lays items out along a single row or column and is built for content that should size itself naturally, like a navbar or a button group. Grid is two-dimensional and suits layouts where you want explicit control over both rows and columns at once, like a full page layout or an image gallery.

Does this tool send my layout anywhere?

No. Every option you pick runs in JavaScript in your own browser tab. Nothing is uploaded, logged, or stored — closing the tab clears it completely.

CSS Flexbox Generator — Visual Flexbox Playground

flex-direction

justify-content

align-items

flex-wrap

gap 12px

items 5

display: flex;

A visual playground for the CSS flexbox properties. Click through flex-direction, justify-content, align-items, and flex-wrap, drag the gap slider, and watch a live row of boxes rearrange itself in real time. When the layout looks right, copy the container declaration straight into your stylesheet — no more guessing which combination of properties gets the spacing you want.

How it works

1
Pick a direction Choose row or column to set the main axis, or one of the reverse variants to flip the order items are laid out in without touching your markup.
2
Align the items Use justify-content to space items along the main axis and align-items to position them on the cross axis. Toggle wrap if you want items to drop to a new line instead of shrinking.
3
Set the gap and copy Drag the gap slider to add space between items without margin hacks, then copy the finished container CSS from the box below the preview.

Your data stays private

All processing happens entirely in your browser. No files, text, or data are ever sent to our servers. You can disconnect from the internet and this tool will still work.

Frequently asked questions

What is the difference between justify-content and align-items?: justify-content positions items along the main axis — the direction set by flex-direction, so it controls horizontal spacing in a row and vertical spacing in a column. align-items positions items along the cross axis, the one perpendicular to flex-direction. Mixing them up is the most common flexbox bug: if your items are centered vertically but you wanted horizontal centering, you probably need the other property.
Why does align-items: stretch not seem to do anything?: stretch is the default, and it only has a visible effect when an item does not already have a fixed size on the cross axis. If every item has an explicit height (in a row) or width (in a column), there is nothing left to stretch. Remove the fixed size to see items fill the container.
What does flex-wrap actually change?: By default, flex items try to fit on a single line and shrink to make room, which can squash them below their natural size. Setting flex-wrap: wrap lets items that no longer fit drop onto a new line instead, each line laid out like its own flex container. wrap-reverse does the same thing but stacks new lines above instead of below.
Should I use gap or margin to space flex items?: Use gap. It puts space only between items, not around the outer edges, so you avoid the classic 'extra margin on the last item' cleanup. gap has been supported in every major browser's flexbox implementation since 2021, so there is no longer a compatibility reason to reach for margin instead.
How is flexbox different from CSS Grid?: Flexbox is one-dimensional — it lays items out along a single row or column and is built for content that should size itself naturally, like a navbar or a button group. Grid is two-dimensional and suits layouts where you want explicit control over both rows and columns at once, like a full page layout or an image gallery.
Does this tool send my layout anywhere?: No. Every option you pick runs in JavaScript in your own browser tab. Nothing is uploaded, logged, or stored — closing the tab clears it completely.

From the blog

CSS Flexbox: Main Axis, Cross Axis, and When to Reach for It How flexbox actually works — main axis vs cross axis, justify-content vs align-items, wrap, gap, and when to use grid instead. Read the post →

CSS Flexbox Generator — Visual Flexbox Playground

How it works

Your data stays private

Frequently asked questions

From the blog

Related tools