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


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

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

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

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

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

Порада:

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

Синтаксис

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

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

auto

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

stretch

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

center

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

flex-start

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

flex-end

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

baseline

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

initial

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

inherit

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

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

Переглядачі

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

29.0

11.0

28.0

9.0

12.1

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

4.4

28.0

9.2


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

Приклади


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

Демонстрація дії різних значень

Простий приклад вирівнювання елементу

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

Вирівнювання елемента з ідентифікатором id="myBlueDiv" по центру гнучкого контенера.

#myBlueDiv {


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


    align-self: center;


}

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