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

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

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

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

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

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

правити

Порада

Використовуйте властивість 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

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div class="row">
    <div>один</div>
    <div>два<br>рядки</div>
    <div>три</div>
</div>

.row {
    display: flex;
    align-items: center;
    height: 120px;
    gap: 8px;
    background: #eee;
}

.row div {
    background: #0172ad;
    color: #fff;
    padding: 8px;
}