What's the difference between justify-content and align-items?

justify-content positions items along the main axis (the direction the flex container flows), while align-items positions them across the cross axis. Flip the direction from row to column and the two swap which visual axis they control — the live preview makes that clear.

When should I use flexbox versus grid?

Flexbox excels at laying items out in one dimension — a row or a column — and distributing space among them. Grid is for true two-dimensional layouts. For a nav bar or a button row, flexbox is usually the simpler fit.

Is the CSS free to use?

Yes, with no attribution. It is generated in your browser and nothing is uploaded.

Flexbox Generator

Experiment with flex alignment and copy the flexbox CSS. Runs entirely in your browser.

Direction

Justify content

Align items

Wrap

Gap8px

CSS

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

Processed on your device. This file is never uploaded.

1Set the direction, then the alignment and wrap.
2Watch the row of items respond.
3Copy the flex CSS for your container.

See flexbox behave

Flexbox is the workhorse of one-dimensional layout, but its properties are easy to mix up — especially which axis justify-content and align-items act on. This playground lets you change each property and watch a live row of items react, which is the fastest way to build the right mental model.

Copy the container rule

The output is the CSS for the flex container: display, direction, justify-content, align-items, wrap and gap. Paste it onto a wrapper and its children arrange themselves accordingly. Everything runs on your device with nothing uploaded.

Frequently asked questions

All css tools →

Glassmorphism Generator

Neumorphism Generator

Border Radius Generator

Box Shadow Generator

Gradient Generator

Clip Path Generator

Flexbox Generator

See flexbox behave

Copy the container rule

Frequently asked questions

What next?