align-self

Оновлено: 15.12.2022

align-self

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

Коротка інформація

Значення за замовчуванням auto
Успадковується Ні
Застосовується До флекс-элементу
Анімується Ні

Синтаксис

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

Значення

auto Бере батьківське значення align-items або stretch, якщо немає батьківського елемента.
flex-start Елемент вирівнюється на початку поперечної осі контейнера.
flex-end Елемент вирівнюється в кінці поперечної осі контейнера.
center Елемент вирівнюється по центральній лінії на поперечній осі.
baseline Елемент вирівнюється по базовій лінії тексту.
stretch Елемент розтягується таким чином, щоб зайняти весь вільний простір контейнера по поперечній осі.

Приклад

Об'єктна модель

Об'єкт.style.alignSelf

Примітка

Safari до версії 9 підтримує властивість -webkit-align-self.

Браузери

align-self

Переглянути сумісність з Can I use?

align-self