How do I center something with flexbox?

On the parent: display: flex; justify-content: center; align-items: center. The parent needs a height (for example min-height: 100vh) for the vertical centring to show.

Why does align-content do nothing?

align-content spaces out the lines of a flex container, so it only works when items wrap onto more than one line and the container is taller than the lines. With flex-wrap: nowrap there is one line and nothing to distribute.

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

justify-content works along the main axis (the direction set by flex-direction), align-items across it. When you switch to flex-direction: column the two swap what they do on screen.

How do I make one item take the remaining space?

Give that item flex: 1 (or flex-grow: 1). It grows to fill whatever space the other items leave in the line.

CSS toolsFlexbox generator

CSS Flexbox Generator

Choose the direction, wrapping and alignment and this CSS flexbox generator moves the boxes the way a browser would, then hands you the CSS for the container. The boxes have different heights on purpose, so the effect of align-items is easy to see.

flex-direction

flex-wrap

justify-content

align-items

align-content

gap12px

Items in the preview5

Your CSS

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

How to use the flexbox generator

Pick a direction: a row lays the items out side by side, a column stacks them.
Allow wrapping if the items may move to a new line when they run out of room.
Align the items along the line with justify-content and across it with align-items.
Set the gap, then copy the CSS onto the parent element with the class container.

Main axis and cross axis

Every flex container has two axes. The main axis runs in the direction of flex-direction: left to right for row, top to bottom for column. The cross axis runs at a right angle to it. Once you know which axis is which, flexbox stops being guesswork: justify- properties work on the main axis, align- properties on the cross axis.

The reverse directions flip the start and end of the main axis. They change what the user sees, but not the order a screen reader or the Tab key follows, so use them for visual effects only.

The CSS flexbox properties in the output

justify-content shares out free space along the line: packed at the start, the centre or the end, or spread between and around the items. align-items places each item across the line; stretch (the default) makes items without a fixed height as tall as the line, and baseline lines up their first line of text.

flex-wrap decides whether items squeeze onto one line or move to the next. With wrapping on, align-content spaces the lines themselves. gap puts space between items and lines without margins on the outer edges, and works on flex containers in every current browser.

These are container settings. How each item grows or shrinks is set on the item itself with flex: grow shrink basis, for example flex: 1 1 200px for cards that start at 200px and share the rest.

Questions

How do I center something with flexbox?: On the parent: display: flex; justify-content: center; align-items: center. The parent needs a height (for example min-height: 100vh) for the vertical centring to show.
Why does align-content do nothing?: align-content spaces out the lines of a flex container, so it only works when items wrap onto more than one line and the container is taller than the lines. With flex-wrap: nowrap there is one line and nothing to distribute.
What is the difference between justify-content and align-items?: justify-content works along the main axis (the direction set by flex-direction), align-items across it. When you switch to flex-direction: column the two swap what they do on screen.
How do I make one item take the remaining space?: Give that item flex: 1 (or flex-grow: 1). It grows to fill whatever space the other items leave in the line.