Справочник · CSS

align-self: выравнивание одного элемента

Свойство переопределяет поперечное выравнивание только у этого элемента, не у всех соседей.

Как это работает

Если контейнер центрирует детей, одной кнопке можно сказать stretch или flex-end. Во флексе это поперечная ось, в гриде — вертикаль для ячейки по умолчанию. auto возвращает общее правило контейнера. Не задавай align-self каждому ребёнку: тогда общее align-items было не нужно.

.toolbar { display: flex; align-items: center; }
.toolbar .status { align-self: flex-end; }

Когда использовать

Один необычный элемент в ряду: метка, которая должна прижаться к низу карточки. Остальных выравнивай контейнером.

Частые ошибки

• Поменяли выравнивание всех, хотя хотели поправить один элемент.
• Перепутали ось и ждали горизонтальный эффект.
• Значение auto оставили и не поняли, почему ничего не изменилось.