css властивість align-items
Властивість align-items вирівнює елементи всередині рядків гумового контейнера в перпендикулярному (горизонтальному) напрямку.
align-items відрізняється від align-content, тим що перша властивість задає вирівнювання елементів у поточному рядку гнучкого контейнера, а друга - вирівнює власне самі рядки.
Візуалізація роботи властивості:
Властивість подібна до justify-content, але працює лише у перпендикулярному напрямку.
Хоча початково властивість була створена тільки для гнучких контейнерів, зараз її можна застосовувати і для блокових контейнерів та сіток (CSS Grid).
автор: Svitlana
- Порада
-
Використовуйте властивість align-self, щоб перевизначити властивістьalign-items для окремого елемента.
автор: Svitlana - Нотатка
-
Значення stretch працює, тільки тоді, коли не вказано висоту дочірнього елемента. Ця властивість дозволяє працювати зі гнучкими, блоковими контейнерами, а також сітками.
автор: Svitlana
Синтаксис
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;Властивість align-items може отримувати 7 значень:
-
stretch -
Елементи розтягуються та займають весь доступний простір контейнера. Без задання.
автор: Svitlana -
center -
Елементи розташовані по центру контейнера.
автор: Svitlana -
flex-start -
Елементи розташовані на початку контейнера.
автор: Svitlana -
flex-end -
Елементи розташовані в кінці контейнера.
автор: Svitlana -
baseline -
Елементи розташовані на базовій лінії контейнера.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)
автор: Svitlana
| Значення без задання: | stretch |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.alignItems="center" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 29 | 20 | 9 | 16 | 12 | 11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 29 | 20 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Контейнер вищий за елементи, тож видно, як align-items: center вирівнює їх по центру поперечної осі — незалежно від висоти кожного.
HTML
<div class="row">
<div>один</div>
<div>два<br>рядки</div>
<div>три</div>
</div>CSS
.row {
display: flex;
align-items: center;
height: 120px;
gap: 8px;
background: #eee;
}
.row div {
background: #0172ad;
color: #fff;
padding: 8px;
}Приклад роботи властивості
Динамічний приклад
Приклади дії різних значень
Демонстрація властивості
Коментарі
Коментарів ще немає — будьте першим!