css властивість align-content

CSS властивість align-content задає вирівнювання для кожного рядка гумового елемента по перпендикулярній (вертикальній) вісі.

Властивість `align-content`

Ця властивість схожа align-items, але замість вирівнювання гнучких елементів, він вирівнює рядки в гнучких елементах. Вона працює як justify-content, але вирівнює не окремі елементи, а цілий рядок у багаторядковому контейнері, якщо є додатковий простір у вертикальному напрямку.

Хоча початково я властивість була створена тільки для гнучких контейнерів, зараз її можна застосовувати і для блокових контейнерів та сіток(CSS Grid).

CSS властивість align-content може приймати 6 різних значень, кожне з яких змінює поведінку цієї властивості. Візуально поведінка змінюється так:

Властивість `align-content`

автор: NagarD

Порада: Зверни увагу, властивість align-content не буде працювати, якщо гумовий контейнер має тільки один рядок з елементами!
автор: NagarD
Порада: Використовуй властивість justify-content для вирівнювання елементів по головній (горизонтальній) вісі.
автор: NagarD
Нотатка: Властивість align-content змінює поведінку властивості flex-wrap.
автор: NagarD
Нотатка: Значення stretch працює, тільки тоді, коли не вказано висоту дочірнього елемента. Ця властивість дозволяє працювати зі гнучкими, блоковими контейнерами, а також сітками.
автор: NagarD

Синтаксис

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Властивість align-content може отримувати 8 значень:

stretch

Рядки розтягуються, щоб заповнити вільний простір. Без задання.

автор: NagarD

center

Рядки вирівнюються по центру гумового контейнера.

автор: NagarD

flex-start

Рядки розташовуються на початку поперечної вісі.

автор: NagarD

flex-end

Рядки розташовуються з кінця поперечної осі.

автор: NagarD

space-between

Рядки рівномірно розподіляються в гумовому контейнері. Перший рядок знаходиться на початку контейнера, а останній перебуває в кінці.

автор: NagarD

space-around

Рядки рівномірно розподілені з рівними відстанями між ними.

Порожній простір перед першим рядком і після останнього рядка дорівнює половині простору між двома сусідніми рядками.

автор: NagarD

initial

Встановлює властивість у значення без задання

автор: NagarD

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: NagarD

Значення без задання:	stretch
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	object.style.alignContent="center"