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