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

Назначение

align-self переопределяет выравнивание конкретного flex- или grid-элемента по соответствующей оси.

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

Свойство задают ребёнку, а общее align-items — контейнеру. Значение auto обычно следует родительскому выравниванию. Направление поперечной оси во Flexbox зависит от flex-direction.

Пример

<style>
.row{display:flex;align-items:flex-start;min-height:9rem;gap:12px;background:#f0f3f1}.row>div{padding:12px;border:1px solid}.special{align-self:flex-end}
</style>
<div class="row"><div>Сверху</div><div class="special">Индивидуально снизу</div></div>

Что должно получиться

Первый блок следует общему выравниванию к началу, второй использует собственное выравнивание к концу поперечной оси. Исходный порядок элементов не меняется.

Граница применения и частая ошибка

Не назначайте align-self контейнеру в надежде изменить всех детей. Также учтите, что автоматические внешние отступы могут влиять на распределение пространства отдельно от выравнивания.

Самостоятельная проверка

Измените align-self у второго блока с flex-end на center. Затем переключите контейнер в column и определите новую поперечную ось.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.

Связанные материалы

• Каскад и специфичность
• Модель размеров
• Отладка стилей