skip to main content

align-content

css

Кратко 🔗

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

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

Пример 🔗

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

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

Как это понять 🔗

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

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

Как пишется 🔗

Возможные значения: 🔗

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

Подсказки 🔗

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

Автор: Алёна,