What is the difference between align-items and align-content in Flexbox?

Question

Accepted Answer

align-items positions each item within its own line on the cross axis; align-content positions the whole stack of wrapped lines on the cross axis.
Both work along the cross axis (vertical, for a row), but at different scales. align-items answers "where does each item sit inside its row?" align-content answers "where do all the rows sit inside the container?"

Property
Scope
When it works

align-items
A single line/row
Always

align-content
The set of lines
Only when items wrap onto multiple lines

#parent {
  display: flex;
  flex-flow: row wrap;
  /* Centre each item vertically within its own row */
  align-items: center;
  /* And centre the whole block of rows in the container */
  align-content: center;
}

Values for align-items: stretch, flex-start, flex-end, center, baseline — where baseline lines up items by the baseline of their text, handy when items have different font sizes.

Property	Scope	When it works
`align-items`	A single line/row	Always
`align-content`	The set of lines	Only when items wrap onto multiple lines