css властивість align-self
Властивість align-self вирівнює окремі елементи в гнучкому контейнері, перевизначаючи значення align-items.
Якщо для нащадку гнучкого елементу заданий відступ зі значенням auto, align-self ігнорується.
Властивість не впливає на елементи таблиці.
Хоча початково властивість була створена тільки для гнучких контейнерів, зараз її можна застосовувати і для блокових контейнерів та сіток (CSS Grid)
| Порада: | Не забувайте, що властивість |
Синтаксис
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;
}