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

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

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

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

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

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

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

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

Синтаксис

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

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

stretch

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

center

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

flex-start

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

flex-end

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

space-between

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

space-around

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

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

initial

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

inherit

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

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

Переглядач
align-content	29.0	11.0	28.0	9.0	12.1

Переглядач
align-content	4.4	28.0	9.2

Мобільних переглядачів ще не додано.

Приклади

Приклад дії різних значень властивості align-content

See the Pen <a href='https://codepen.io/MichaelBondar/pen/NvbaaP/'>align-content-1</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Демонстрація властивості

See the Pen <a href='https://codepen.io/MichaelBondar/pen/JybreB/'>align-content-2</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад роботи властивості

See the Pen <a href='https://codepen.io/MichaelBondar/pen/bvGGeN/'>bvGGeN</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Динамічний приклад

See the Pen <a href='https://codepen.io/MichaelBondar/pen/QmWWEy/'>QmWWEy</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.