align-self: индивидуальное выравнивание

align-self позволяет переопределить значение align-items для конкретного flex-элемента или Grid-ячейки, выравнивая его по поперечной оси независимо от соседей.

Зачем нужно

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

Где используется

  • Аватар прижат к низу чат-сообщения, а текст — к верху
  • Кнопка "Купить" всегда внизу карточки при разной высоте контента
  • Один элемент растянут на всю высоту строки при align-items: center

Значения

.item {
  align-self: auto;       /* наследует align-items контейнера (по умолчанию) */
  align-self: flex-start; /* к началу поперечной оси */
  align-self: flex-end;   /* к концу поперечной оси */
  align-self: center;     /* по центру поперечной оси */
  align-self: baseline;   /* по базовой линии текста */
  align-self: stretch;    /* растянуть на всю высоту строки */
}

Примеры

Кнопка всегда внизу карточки

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card__body {
  flex: 1; /* занимает всё место */
}
.card__btn {
  align-self: flex-end; /* или margin-top: auto */
}

<div class="card">
  <img src="photo.jpg">
  <div class="card__body">Контент разной длины</div>
  <button class="card__btn">Подробнее</button>
</div>

Один элемент прижат к низу

.row {
  display: flex;
  align-items: flex-start; /* все элементы к верху */
  height: 200px;
}
.row__item--bottom {
  align-self: flex-end; /* только этот — к низу */
}

<div class="row">
  <div>Вверх</div>
  <div>Вверх</div>
  <div class="row__item--bottom">Вниз</div>
</div>

Один элемент растянут при общем center

.toolbar {
  display: flex;
  align-items: center;
  height: 56px;
}
.toolbar__divider {
  align-self: stretch; /* вертикальный разделитель на всю высоту */
  width: 1px;
  background: #e2e8f0;
}

В Grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.grid__item--stretch {
  align-self: stretch; /* только эта ячейка растянута */
}

align-self vs margin: auto

Оба позволяют позиционировать элемент, но по-разному:

/* align-self — через ось выравнивания */
.item { align-self: flex-end; }

/* margin: auto — поглощает свободное пространство */
.item { margin-top: auto; } /* прижимает к низу при flex-direction: column */

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

  1. align-self на контейнере — свойство применяется к flex-элементу или Grid-ячейке, не к контейнеру
  2. align-self: stretch с заданным height — если у элемента задана высота, stretch не переопределит её
  3. Путаница с justify-self — в Flexbox justify-self не работает; для позиционирования по главной оси используйте margin-left: auto или order

Связанные темы

Ресурсы