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

justify-content positions items along the main axis (the direction set by flex-direction), while align-items positions them along the perpendicular cross axis.

What is the main axis?

It is the primary direction items flow in. With flex-direction: row it is horizontal; with column it is vertical.

When does flex-wrap matter?

Only when items together are wider (or taller) than the container. With wrap, extra items move to a new line instead of shrinking or overflowing.

gap adds even spacing between flex items without needing margins, keeping the layout clean.

Is anything sent to a server?

No. The playground runs entirely in your browser and nothing is uploaded.

Flexbox Playground

flex-direction

justify-content

align-items

flex-wrap

gap: 8px

Items: 4

Preview

CSS

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

Related external sites

Some links are affiliate links.

AmazonThe world's largest online marketplace for shopping, electronics, books, software, and more. Fast shipping, easy returns, and a vast product catalog make it a go-to for everyday purchases. Prime membership adds streaming, free shipping, and exclusive deals.UdemyAn online learning marketplace with over 250,000 courses on coding, design, business, and more. Courses are taught by industry experts and available at your own pace. Frequent sales make it one of the most affordable ways to learn new skills.

Experiment with CSS Flexbox visually. Toggle flex-direction, justify-content, align-items, flex-wrap and gap and watch a live preview update, then copy the generated CSS. It is a fast way to learn how flex properties interact or to dial in a layout. Everything runs in your browser.

How to use

Toggle the flex properties using the buttons.
Watch the preview boxes rearrange in real time.
Adjust the number of items, then copy the CSS into your project.

Main axis and cross axis

A flex container lays items along a main axis set by flex-direction (a row or a column). justify-content positions items along that main axis, while align-items positions them along the cross axis (perpendicular to it). flex-wrap decides whether items spill onto new lines, and gap adds consistent spacing between them.

Features

All key properties

Control direction, justify-content, align-items, wrap and gap.

Live preview

See items rearrange instantly as you change each property.

Adjustable items

Change the number of boxes to see how layouts respond.

Copy the CSS

Grab a ready-to-use CSS rule for your container.

When to use it

Prototyping

Quickly find the right flex settings for a layout before coding it.

Learning flexbox

Build intuition for how justify and align behave together.

Fixing alignment

Test combinations to center or distribute items correctly.

Teaching

Demonstrate flexbox behavior live for students or teammates.

Notes

The main axis follows flex-direction (row or column).
justify-content works on the main axis; align-items on the cross axis.
Wrapping only matters when items exceed the container width.
Everything runs on your device; nothing is uploaded.

FAQ

What is the difference between justify-content and align-items?: justify-content positions items along the main axis (the direction set by flex-direction), while align-items positions them along the perpendicular cross axis.
What is the main axis?: It is the primary direction items flow in. With flex-direction: row it is horizontal; with column it is vertical.
When does flex-wrap matter?: Only when items together are wider (or taller) than the container. With wrap, extra items move to a new line instead of shrinking or overflowing.
What does gap do?: gap adds even spacing between flex items without needing margins, keeping the layout clean.
Is anything sent to a server?: No. The playground runs entirely in your browser and nothing is uploaded.