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

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

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

Властивість не впливає на елементи таблиці.

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

правити

Порада

Не забувайте, що властивість align-self перевизначає властивість align-items!

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

auto

Елемент успадковує батьківське значення властивісті align-items. Якщо батька немає значення встановиться - stretch. Без задання.

автор: Svitlana

правити

stretch

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

автор: Svitlana

правити

center

Елемент розташовується по центру контейнера.

автор: Svitlana

правити

flex-start

Елемент розташовується на початку контейнера.

автор: Svitlana

правити

flex-end

Елемент розташовується в кінці контейнера.

автор: Svitlana

правити

baseline

Елемент вирівнюється по базовій лінії контейнера.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div class="row">
    <div>один</div>
    <div id="myBlueDiv">цей — по центру</div>
    <div>три</div>
</div>

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

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

#myBlueDiv {
    align-self: center;
    background: #0172ad;
}