Разница между align-items и align-content в Flexbox

Основные моменты

В Flexbox есть главная ось (main axis) и поперечная ось (cross axis).
Главная ось определяется свойством flex-direction:

• row (по умолчанию) — главная ось горизонтальная (X), поперечная — вертикальная (Y)
• column — главная ось вертикальная (Y), поперечная — горизонтальная (X)

1. justify-content

   • Распределяет элементы по главной оси
   • Пример:
   .container {
   display: flex;
   flex-direction: row; /* главная ось X */
   justify-content: space-between; /* распределяем по X */
   }

   Expand code

2. align-items

   • Выравнивает элементы по поперечной оси (не зависит от количества строк)
   • Пример:
   .container {
   display: flex;
   flex-direction: row; /* главная ось X, поперечная Y */
   align-items: center; /* выравниваем элементы по вертикали */
   }

   Expand code

3. align-content

   • Распределяет пространство между рядами элементов по поперечной оси
   • Работает только если есть несколько строк (например, при flex-wrap: wrap)
   • Пример:
   .container {
   display: flex;
   flex-direction: row; /* главная ось X, поперечная Y */
   flex-wrap: wrap; /* несколько строк */
   align-content: space-between; /* распределяем пространство между рядами по Y */
   }

   Expand code

Если элементов только одна строка, align-content не имеет эффекта.

Почему возникает путаница при flex-direction: column

• Главная ось теперь вертикальная (Y)
• Поперечная ось — горизонтальная (X)
• justify-content → распределяет элементы по вертикали
• align-items → выравнивает элементы по горизонтали (поперечной оси)
• align-content → распределяет пространство между рядами по горизонтали, но работает только при нескольких колонках (wrap)

Схема для запоминания

Вывод:

• align-items выравнивает элементы по поперечной оси внутри строки.
• align-content распределяет пространство между строками (или колонками, если flex-direction: column) по поперечной оси.
• Поэтому в тесте при flex-direction: column для распределения по горизонтали используется align-content — потому что речь о нескольких колонках элементов, а не об отдельных элементах.

Подробнее об этом в уроке