css властивість align-items
Властивість align-items вирівнює елементи всередині рядків гумового контейнера в перпендикулярному (горизонтальному) напрямку.
align-items відрізняється від align-content, тим що перша властивість задає вирівнювання елементів у поточному рядку гнучкого контейнера, а друга - вирівнює власне самі рядки.
Візуалізація роботи властивості:
Властивість подібна до 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;
}Приклад роботи властивості
Динамічний приклад