🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Newly Available» c 2024-04-16.

align-content — свойство CSS, которое управляет вертикальным расположением содержимого внутри контейнера с многострочным макетом, например, в flex или grid. Оно задаёт как распределить свободное пространство между строками или колонками, если их несколько. Это полезно, когда нужно точно настроить визуальную составляющую блока, чтобы он выглядел аккуратно и гармонично.

Пример использования:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* Распределяет строки по вертикали */
  height: 300px; /* Высота контейнера */
}

В этом случае, внутри .container строки будут расположены так, что между ними появится равное пространство, а верхняя и нижняя — по краю контейнера. Важно: свойство работает, когда внутри есть несколько строк (например, у flex или grid), иначе оно не даст видимого эффекта.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.