align — content
Как justify — content , но управляет целыми строками, а не отдельными флекс-элементами.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 11 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство распределяет свободное пространство по поперечной оси между строками флекс-элементов.
Работает практически как свойство justify — content , но управляет строками по поперечной оси.
Пример
Скопировать ссылку «Пример» Скопировано
Строчки прижмутся к центру родителя по вертикали.
.container display: flex; align-content: center;>.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 работать не будет.
�� Видимый эффект будет только если высота родителя больше чем суммарная высота всех элементов во всех рядах.
Полный список свойств флексбоксов можно посмотреть в гайде по flexbox.
- Chrome 66, поддерживается 66
- Edge 79, поддерживается 79
- Firefox 81, поддерживается 81
- Safari 12.1, поддерживается 12.1
align-content¶
Свойство align-content задаёт тип выравнивания строк внутри флекс-контейнера по поперечной оси при наличии свободного пространства.
Демо¶
Это свойство не влияет на однострочные flex-контейнеры (т. е. с flex-wrap: nowrap ).
Flexbox и выравнивание
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
/* Positional alignment */ align-content: center; /* Pack items around the center */ align-content: start; /* Pack items from the start */ align-content: end; /* Pack items from the end */ align-content: flex-start; /* Pack flex items from the start */ align-content: flex-end; /* Pack flex items from the end */ align-content: left; /* Pack items from the left */ align-content: right; /* Pack items from the right */ /* Baseline alignment */ align-content: baseline; align-content: first baseline; align-content: last baseline; /* Distributed alignment */ /* Distribute items evenly The first item is flush with the start, the last is flush with the end */ align-content: space-between; /* Distribute items evenly Items have a half-size space on either end */ align-content: space-around; /* Distribute items evenly Items have equal space around them */ align-content: space-evenly; /* Distribute items evenly Stretch 'auto'-sized items to fit the container */ align-content: stretch; /* Overflow alignment */ align-content: safe center; align-content: unsafe center; /* Global values */ align-content: inherit; align-content: initial; align-content: unset; Значения¶
Значение по-умолчанию: stretch
Применяется к флекс-контейнеру
| Значение | Положение | Описание |
|---|---|---|
| flex-start |  |
Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей. |
| center |  |
Строки располагаются по центру контейнера. |
| flex-end |  |
Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей. |
| space-between |  |
Строки равномерно распределяются в контейнере и расстояние между ними одинаково. |
| space-around |  |
Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками. |
| stretch |  |
Строки равномерно растягиваются, заполняя свободное пространство. |
Спецификации¶
Поддержка браузерами¶
Пример¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
html> head> meta charset="utf-8" /> title>align-contenttitle> style> .flex-container width: 70px; height: 240px; border: 1px solid #333; padding: 10px; display: flex; flex-wrap: wrap; align-content: center; > .flex-container div width: 70px; height: 70px; border-radius: 50%; > .red background: red; > .yellow background: yellow; > .green background: green; > style> head> body> div class="flex-container"> div class="red">div> div class="yellow">div> div class="green">div> div> body> html> Примечание¶
Safari до версии 9 поддерживает свойство -webkit-align-content .
Ссылки¶
- Свойство align-contentMDN (рус.)
CSS свойство align-content
Свойство align-content устанавливает тип выравнивания строк флекс-элементов по вертикали внутри флекс-контейнера, позволяя управлять свободным пространством.
Свойство align-content работает только в случае, если разрешен перенос строк и указано направление flex-flow: row/row-reverse/column/column-reverse wrap/wrap-reverse; и высота flex-контейнера.
CSS синтаксис
align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| stretch | Значение по умолчанию. Строки флекс-элементов равномерно растягиваются, заполняя все доступное пространство. |
| center | Строки флекс-элементов выравниваются по высоте по середине контейнера относительно его левого края. |
| flex-start | Строки флекс-элементов выравниваются по левому краю контейнера относительно его верхнего края. |
| flex-end | Строки флекс-элементов выравниваются по левому краю контейнера относительно его нижнего края. |
| space-between | Строки флекс-элементов выравниваются по высоте по середине контейнера относительно его левого края. Свободное пространство распределяется между ними. Первый ряд флекс-элементов прижимается к началу контейнера, последний ряд — к нижнему краю. |
| space-around | Строки флекс-элементов равномерно распределяются по высоте, свободное пространство добавляется сверху и снизу строки. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Упаковываем строки в середину флекс-контейнера
Свойство align-content, остальные значения
Остальные четыре значения свойства align-content аналогичны значениям свойства justify-content , отличается только ось:
- flex-start располагает ряды в начале поперечной оси.
- flex-end располагает ряды в конце поперечной оси.
- space-between равномерно распределяет ряды вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступов у краёв нет.
- space-around равномерно распределяет ряды вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступы у краёв равны половине расстояния между соседними рядами.
Вся теория и выполнение задания доступны по подписке
Подписка — это:
После подписки вы получите доступ:
- теория тренажёров без ограничений;
- доступ ко всем платным тренажёрам;
- интересные и сложные вызовы для практики;
- безлимитные проверки испытаний.
Бесплатные материалы:
- Конспект части «Флексбокс. Знакомство»
- Статья «Примеры использования флексбоксов»
- Видео «Кому нужны флексы»