Свойство CSS align-self

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

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

align-self работает только тогда, когда элемент находится внутри flex-контейнера, grid-контейнера или имеет абсолютное позиционирование. На обычном блочном элементе оно не имеет эффекта — именно поэтому значение stretch ничего не даёт, пока на родителе не будет установлено display: flex (или grid). Это одно из свойств CSS3.

Связь с align-items

Связь между ними — «контейнер против элемента»:

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

Поскольку align-self принимает те же значения, что и align-items, набор значений нужно изучить лишь один раз. Значение по умолчанию auto означает «использовать значение align-items контейнера», так что элемент без align-self следует общему правилу.

Информация

align-self игнорируется, если у flex-элемента установлен вертикальный отступ auto (автоматический отступ побеждает и поглощает свободное пространство). Также свойство не имеет эффекта на ячейки таблицы и самостоятельные блочные элементы, не являющиеся flex/grid-элементами.

Начальное значение	auto
Применяется к	Flex-элементам, grid-элементам и абсолютно позиционированным блокам.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS3
DOM-синтаксис	object.style.alignSelf = "auto";

Синтаксис

Синтаксис свойства CSS align-self

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

Пример свойства align-self:

Пример свойства CSS align-self со значением flex-start

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(1) {
        align-self: flex-start;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the first box is set to "flex-start".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Попробуйте сами »

Результат

align-items: center на контейнере удерживает блоки №2 и №3 выровненными по центру по вертикали, тогда как блок №1 — с align-self: flex-start — смещается к верху, переопределяя значение контейнера только для себя.

Ниже приведён пример с тремя блоками, где для второго задано значение flex-end.

Пример свойства align-self со значением "flex-end":

Пример свойства CSS align-self со значением flex-end

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(2) {
        align-self: flex-end;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "flex-end".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Попробуйте сами »

Пример со значением "stretch":

По умолчанию flex-элемент занимает лишь ту высоту, которая нужна его содержимому. Установив align-self: stretch для одного элемента, вы заставляете именно его растянуться на всю поперечную высоту контейнера, тогда как остальные сохраняют естественную высоту. Чтобы stretch работал, у элемента не должна быть задана height (или она должна быть равна auto).

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      section {
        display: flex;
        align-items: center;
        height: 120px;
        padding: 10px;
        background: #99caff;
      }
      div {
        height: 60px;
        background: #1c87c9;
        margin: 5px;
      }
      div:nth-child(2) {
        align-self: stretch;
        height: auto;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Align-self property example</h2>
    <p>Here the align-self for the second box is set to "stretch".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

align-self в CSS Grid

align-self работает не только в Flexbox — оно точно так же применяется внутри контейнера grid, выравнивая grid-элемент вдоль блочной (столбцовой) оси его grid-области:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center; /* default for every item */
}
.grid .featured {
  align-self: start; /* this one item hugs the top of its cell */
}

В grid вместо flex-start и flex-end используются ключевые слова start и end, но принцип тот же: контейнер задаёт значение по умолчанию через align-items, а align-self переопределяет его для конкретного элемента.

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

Один нестандартный элемент. Большинство элементов выровнены одним образом, но один (иконка, бейдж, призыв к действию) требует другого положения.
Прижать элемент к верху или низу в центрированной строке. Например, навигационная панель, выравнивающая ссылки по центру по вертикали, но прижимающая логотип к верху.
Растянуть одну карточку. В строке карточек одинаковой высоты заставить только одну заполнить высоту с помощью align-self: stretch.

Если каждый элемент должен выравниваться одинаково, лучше установить align-items на контейнере — это чище, чем повторять align-self для каждого дочернего элемента.

Значения

Значение	Описание	Попробовать
auto	Элемент наследует свойство align-items родительского контейнера. Это значение по умолчанию.	Попробовать »
stretch	Элементы растягиваются, чтобы заполнить контейнер.	Попробовать »
center	Элементы размещаются по центру контейнера.	Попробовать »
flex-start	Элементы размещаются в начале контейнера.	Попробовать »
flex-end	Элементы размещаются в конце контейнера.	Попробовать »
baseline	Элементы выравниваются по базовой линии контейнера.	Попробовать »
initial	Свойство принимает своё значение по умолчанию.	Попробовать »
inherit	Свойство наследуется от родительского элемента.

Практика

Что делает свойство 'align-self' в CSS?

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

Связанные свойства

align-items — версия этого свойства для контейнера.
align-content — выравнивает строки многострочного flex-контейнера.
justify-content — выравнивает элементы вдоль главной оси.
flex-direction — задаёт, какая ось является главной (и, соответственно, какую ось контролирует align-self).
Полное руководство по Flexbox — как взаимодействуют все свойства выравнивания flex.