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

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

Свойство игнорируется, если для какого-либо flex-элемента установлено свойство margin со значением "auto".

Свойство align-self имеет те же значение, что и свойство align-items:

  • auto
  • stretch
  • flex-start
  • flex-end
  • center
  • baseline
Значение по умолчанию auto
Применяется К флекс-элементам, грид-элементам и абсолютно позиционированным блокам.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.alignSelf = "auto";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Для первого блока установлено свойство align-self со значением "flex-start".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Пример, где использованы три блока. Второй блок установлен при помощи значения "flex-end":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p>Для второго блока установлено значение "flex-end".</p>
    <section>
      <div>Box #1</div>
      <div>Box #2</div>
      <div>Box #3</div>
    </section>
  </body>
</html>

Значения

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

Поддержка браузера

chrome firefox safari opera
29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+

Практикуйте свои знания

Какие из утверждений верны относительно свойства CSS `align-self`?
Считаете ли это полезным?