Кратко
Секция статьи "Кратко"Свойство распределяет свободное пространство по поперечной оси между строками флекс-элементов.
Работает практически как свойство justify
, но управляет строками по поперечной оси.
Пример
Секция статьи "Пример"Строчки прижмутся к центру родителя по вертикали.
.container { display: flex; align-content: center;}
.container { display: flex; align-content: center; }
Как понять
Секция статьи "Как понять"Предположим, у вас 11 элементов на 3 строках. Если размер родителя по поперечной оси позволяет, то при помощи align
можно распределять строчки элементов, сверху, снизу, по центру или равномерно.
Не имеет видимого значения, если элементы располагаются в одну строку.
Как пишется
Секция статьи "Как пишется"Возможные значения
Секция статьи "Возможные значения"stretch
(значение по умолчанию) — строки растягиваются одинаково так, чтобы занять всё доступное пространство родителя.flex
/- start start
— все строки располагаются у начала поперечной оси. Первое значение не зависит от режима чтения текущего языка в то время как второе значение смотрит на него.flex
/- end end
— все строки располагаются у конца поперечной оси.end
смотрит на режим чтения текущего языка.center
— строки выравниваются по центру родителя.space
— первая строка прижимается к началу поперечной оси, последняя — к концу поперечной оси, а остальные располагаются так, чтобы свободное пространство было поделено на отступы между ними равномерно.- between space
— отступы у каждой строки равнозначны отступам у любой другой строки.- around space
— отступы между строками и от краёв родителя одинаковые.- evenly
Подсказки
Секция статьи "Подсказки"💡 Свойство срабатывает, только если во флекс-контейнере больше одной строки элементов. А значит без flex
работать не будет.
💡 Видимый эффект будет только если высота родителя больше чем суммарная высота всех элементов во всех рядах.