Свойство align-content влияет на поведение flex-wrap, регулируя выравнивание не отдельных элементов, а целых групп гибких линий. Оно напоминает align-items, но в отличие от него, вместо работы с отдельными элементами Flex, управляет расположением строк внутри контейнера. Это важно для организации пространства, когда у вас есть несколько строк гибких элементов, и нужно гармонично распределить их по вертикали.
Примечание: Чтобы был какой-то эффект требуется несколько строк элементов.
Совет:Применяйте свойство justify-content для горизонтального выравнивания элементов вдоль главной оси.
| Значение по умолчанию: | Стрейч |
| Inherited: | no |
| Animatable: | no. |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.alignContent="center" |
Поддержка браузера
| Свойство: | align-content |
| Chrome | 21.0 |
| Explorer/Edge | 11.0 |
| Firefox | 28.0 |
| Safari | 9.0 /7.0 -webkit- |
| Opera | 12,1 |
Синтаксис CSS
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
Значения свойств
| Значение | Описание |
| stretch | Значение по умолчанию. Линии тянутся, чтобы занять оставшееся пространство |
| center | Линии упакованы в направлении центра контейнера Flex |
| flex-start | Линии упакованы к началу контейнера Flex |
| flex-end | Линии упакованы к концу контейнера Flex |
| space-between | Линии равномерно распределяются в контейнере Flex |
| space-around | Линии равномерно распределяются в контейнере Flex, с половиной размера пространств на любом конце |
| initial | Присваивает этому свойству значение по умолчанию. |
| inherit | Наследует это свойство из родительского элемента. |