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

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

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

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

Додаткові посилання