В чём разница между justify-content, align-items и align-content?

Выравнивание во Flexbox зависит от осей: главной (по направлению flex-direction) и поперечной.

Что за что отвечает

• `justify-content` — распределяет элементы вдоль главной оси: flex-start, center, space-between, space-around, space-evenly.
• `align-items` — выравнивает элементы одной линии по поперечной оси: stretch (по умолчанию), center, flex-start, baseline.
• `align-content` — распределяет сами линии, если элементы переносятся (flex-wrap) и есть свободное место по поперечной оси. С одной линией не действует.
• `align-self` — выравнивание одного элемента.

.toolbar {
  display: flex;
  justify-content: space-between; /* слева и справа */
  align-items: center;            /* по вертикали по центру */
}

Подвох

При flex-direction: column оси меняются местами: justify-content отвечает за вертикаль, align-items за горизонталь.

Коротко для собеседования

justify-content работает по главной оси, align-items по поперечной для каждой линии, align-content между линиями при переносе.