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


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

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

align-items відрізняється від align-content, тим що перша властивість задає вирівнювання елементів у поточному рядку гнучкого контейнера, а друга - вирівнює власне самі рядки.

Візуалізація роботи властивості:

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

Властивість подібна до justify-content, але працює лише у перпендикулярному напрямку.

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

Порада:

Використовуйте властивість align-self, щоб перевизначити властивістьalign-items для окремого елемента.

Нотатка:

Значення stretch працює, тільки тоді, коли не вказано висоту дочірнього елемента. Ця властивість дозволяє працювати зі гнучкими, блоковими контейнерами, а також сітками.

Синтаксис

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

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

stretch

Елементи розтягуються та займають весь доступний простір контейнера. Без задання.

center

Елементи розташовані по центру контейнера.

flex-start

Елементи розташовані на початку контейнера.

flex-end

Елементи розташовані в кінці контейнера.

baseline

Елементи розташовані на базовій лінії контейнера.

initial

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

inherit

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

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

Переглядачі

Переглядач
align-items

29.0

11.0

28.0

9.0

12.1

Переглядач
align-items

4.4

28.0

9.2


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

Приклади


Приклади дії різних значень

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

Вирівнювання елементів по центру.

div {


    display: -webkit-flex; /* Safari */


    -webkit-align-items: center; /* Safari 7.0+ */


    display: flex;


    align-items: center;


}

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

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

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