How do justify-content and align-items differ?

justify-content distributes items along the main axis; align-items aligns them on the cross axis. Which axis is which comes from flex-direction: with `row` the main axis is horizontal, with `column` it is vertical, and the two properties swap direction with it.

Why does align-content sometimes do nothing?

align-content only applies when there is more than one line, meaning flex-wrap is wrap or wrap-reverse and the items actually wrapped. On a single-line layout use align-items instead.

CSS / FRONTEND · RUNS IN YOUR BROWSER

Flexbox Generator

Adjust flex container properties and watch the items rearrange live.

The preview shows up to 12 items. Container properties only; per-item flex-grow is not generated.

Preview

Preview backdrop

LightDarkTransparent

Generated CSS

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

Container properties

align-content only has an effect once wrapping is allowed and items actually wrap.

flex-direction

flex-wrap

nowrapwrapwrap-reverse

justify-content

align-items

align-content

gap

Preview settings

Demo item count

About this tool

Change flex-direction, flex-wrap, justify-content, align-items, and gap and the demo items rearrange immediately, which explains what each property really does far faster than reading the spec. align-content only appears once flex-wrap is not nowrap, because it has no effect on a single-line layout, so you never copy a declaration that does nothing.

How it works

Set the main axis direction and whether items wrap.
Adjust alignment on both axes and the gap.
Copy the complete .flex-container CSS.

Privacy

Every calculation and preview runs inside this browser. Your input is never uploaded, stored, or written to the URL or any log.

Frequently asked questions

How do justify-content and align-items differ?: justify-content distributes items along the main axis; align-items aligns them on the cross axis. Which axis is which comes from flex-direction: with `row` the main axis is horizontal, with `column` it is vertical, and the two properties swap direction with it.
Why does align-content sometimes do nothing?: align-content only applies when there is more than one line, meaning flex-wrap is wrap or wrap-reverse and the items actually wrapped. On a single-line layout use align-items instead.

← All CSS / Frontend tools