Клавиша / esc

align-content

Управляет распределением свободного пространства вокруг элементов по дополнительной оси.

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство распределяет свободное пространство по поперечной оси между строками элементов внутри флекс- и грид-контейнеров, а также внутри блочных элементов.

Работает практически как свойство justify-content, но управляет строками по поперечной оси.

Пример

Скопировано

Строчки встанут по центру родителя по вертикали.

        
          
          .container {  display: flex;  align-content: center;}
          .container {
  display: flex;
  align-content: center;
}

        
        
          
        
      

Как понять

Скопировано

Предположим, у вас 11 элементов на 3 строках. Если размер родителя по поперечной оси позволяет, то при помощи align-content можно распределять строчки элементов, сверху, снизу, по центру или равномерно.

Не имеет видимого значения, если элементы располагаются в одну строку.

Как пишется

Скопировано
  • normal (значение по умолчанию) — элементы располагаются так, будто свойство выравнивания не применено, на своих местах.
  • start – строки располагаются в начале поперечной оси любого из допустимых контейнеров.
  • center — строки выравниваются по центру родителя.
  • end – – строки располагаются в конце поперечной оси любого из допустимых контейнеров.
  • stretch — если элементам не задан строгий размер, то строки растягиваются одинаково так, чтобы занять всё доступное пространство родителя.
  • flex-start — все строки располагаются у начала поперечной оси флекс-контейнера. Если блок не является флекс-контейнером, то значение читается браузером как start.
  • flex-end — все строки располагаются у конца поперечной оси флекс-контейнера. Если блок не является флекс-контейнером, то значение читается браузером как end.
  • space-between — первая строка прижимается к началу поперечной оси, последняя — к концу поперечной оси, а остальные располагаются так, чтобы свободное пространство было поделено на отступы между ними равномерно.
  • space-around — отступы у каждой строки равнозначны отступам у любой другой строки.
  • space-evenly — отступы между строками и от краёв родителя одинаковые.

Значения space-between, space-around, space-evenly и stretch не сработают для блочных контейнеров.

Блочному контейнеру должна быть задана высота, чтобы был эффект от использования свойства.

Открыть демо в новой вкладке

Подсказки

Скопировано

💡 Свойство срабатывает, только если во флекс-контейнере больше одной строки элементов. А значит без flex-wrap: wrap работать не будет.
💡 Видимый эффект будет только если высота родителя больше чем суммарная высота всех элементов во всех рядах.

Поддержка в браузерах:
  • Chrome 66, поддерживается
  • Edge 79, поддерживается
  • Firefox 76, поддерживается
  • Safari 12.1, поддерживается
О Baseline