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

Определение и применение

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

Поперечная ось зависит от flex-direction (направления главной оси Flexbox), а направление осей — от writing-mode; при этом выравнивание не обязательно вертикальное. В Grid для выравнивания по строчной оси используется justify-self.

Подробнее — в статье учебника CSS «Верстка по Flexbox (работа с элементами)».

Выберите один элемент и измените его вертикальное выравнивание внутри ячейки в генераторе Grid. Настройки можно проверить в превью и сохранить как HTML/CSS.

Значение применяется ко второму элементу. У остальных align-items: stretch. При baseline здесь нет других участников группы. auto использует align-items контейнера. — Значение меняется только у второго элемента. Контейнер: `flex-direction: row`, `writing-mode: horizontal-tb`, `align-items: stretch`. При `baseline` здесь нет других участников группы выравнивания по базовой линии.

Попробуйте значения align-self

Меняется выравнивание только оранжевого элемента по поперечной оси.

HTML и CSS примера

HTML

<div class="stage">
  <div class="item">1</div>
  <div class="item demo-target">2</div>
  <div class="item">3</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  align-self: auto;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  align-self: flex-start;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  align-self: center;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  align-self: flex-end;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.stage {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.item {
  min-width: 0;
  width: 55px;
}
.demo-target {
  background: #ffe4bd;
  align-self: stretch;
}

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

Спецификации: CSS align, CSS flexbox

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.align-self
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`align-self`	✓29	✓12	✓20	✓12.1	✓9	✓29	✓20	✓12.1	✓9	✓2.0	✓4.4	✓9
`anchor-center`	✓125	✓125	✓147	✓111	✓26	✓125	✓147	✓83	✓26	✓27.0	✓125	✓26
`auto`	✓21	✓79	✓28	✓15	✓7	✓25	✓28	✓14	✓7	✓1.5	✓4.4	✓7
В flex-контейнере	✓36	✓12	✓20	✓12.1	✓7	✓36	✓20	✓12.1	✓7	✓3.0	✓37	✓7
`baseline`	✓21	✓79	✓28	✓44	✓7	✓25	✓28	✓43	✓7	✓7.0	✓57	✓7
first baseline	✓59	✓79	✓52	✓46	✓11	✓59	✓52	✓43	✓11	✓7.0	✓59	✓11
last baseline	✓108	✓108	✓52	✓94	✓16.2	✓108	✓52	✓73	✓16.2	✓21.0	✓108	✓16.2
safe and unsafe	✓115	✓115	✓63	✓101	✓17.6	✓115	✓63	✓77	✓17.6	✓23.0	✓115	✓17.6
start and end	✓93	✓93	✓45	✓79	✓15.4	✓93	✓45	×	✓15.4	✓17.0	✓93	✓15.4
`stretch`	✓57	✓79	✓52	✓44	✓9	✓57	✓52	✓43	✓9	✓7.0	✓57	✓9
В grid-контейнере	✓57	✓16	✓52	✓44	✓10.1	✓52	✓52	✓43	✓10.3	✓6.2	✓57	✓10.3
`normal`	✓21	✓79	✓28	✓15	✓7	✓25	✓28	✓14	✓7	✓1.5	✓4.4	✓7
Supported for absolutely-positioned boxes	✓122	✓122	✓134	✓108	✓26	✓122	✓134	✓81	✓26	✓26.0	✓122	✓26
`stretch`	✓21	✓79	✓28	✓15	✓7	✓25	✓28	✓14	✓7	✓1.5	✓4.4	✓7
Ещё 9 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Поддержка свойства в целом не означает поддержку всех значений. Отдельно проверяйте safe, unsafe, last baseline и anchor-center, особенно для абсолютно позиционированных элементов.

CSS синтаксис:

CSS

/* Поведение по умолчанию и растягивание */
align-self: auto | normal | stretch;

/* Выравнивание у края или по центру */
align-self: center | start | end | self-start | self-end | flex-start | flex-end;

/* Выравнивание по базовой линии */
align-self: baseline | first baseline | last baseline;

/* Поведение при переполнении */
align-self: [ safe | unsafe ]? [ normal | center | start | end | self-start | self-end | flex-start | flex-end ];

/* Якорное позиционирование */
align-self: anchor-center;

/* Глобальные значения */
align-self: initial | inherit | unset | revert | revert-layer;

Знак | разделяет варианты, квадратные скобки группируют их, а ? означает необязательную часть. Например, допустимы center и safe center. Сочетания модификаторов с normal определены актуальной спецификацией и могут ещё не поддерживаться браузерами.

JavaScript синтаксис:

JavaScript

element.style.alignSelf = "auto";

Начальное значение свойства

auto.

Значения свойства

Значения align-self
Значение	Описание
`auto`	Использует значение `align-items` родительского контейнера. Это не наследование свойства `align-self`. Для абсолютно позиционированного элемента действует как `normal`. Начальное значение.
`normal`	Во Flexbox действует как `stretch`. В Grid обычно растягивает элемент, но для элементов с предпочтительным соотношением сторон (например, у изображений) действует как `start`. При абсолютном позиционировании поведение зависит от типа элемента и его размеров.
`stretch`	Растягивает элемент по оси выравнивания, если его размер по этой оси автоматический. Учитывает ограничения минимального и максимального размера.
`center`	Размещает элемент по центру строки Flexbox или области Grid по оси выравнивания.
`start` / `end`	Выравнивает у начального или конечного края области выравнивания с учётом направления письма контейнера. Допустимы и во Flexbox, и в Grid.
`self-start` / `self-end`	Выбирает начальный или конечный край с учётом направления письма самого элемента.
`flex-start` / `flex-end`	Во Flexbox выравнивает у начала или конца поперечной оси. При `flex-wrap: wrap-reverse` эти края меняются местами, поэтому результат может отличаться от `start` и `end`. Вне Flexbox действует как `start` и `end`.
`baseline` / `first baseline` / `last baseline`	Выравнивает элемент по общей первой или последней базовой линии с другими участниками группы. `baseline` означает `first baseline`; для наглядного результата сравните элементы с разным размером текста.
`safe` / `unsafe`	Модификаторы позиционного выравнивания, например `safe center`. Если элемент не помещается, `safe` переключает выравнивание к началу, чтобы избежать потери содержимого за начальным краем; `unsafe` сохраняет выбранное выравнивание даже при переполнении.
`anchor-center`	При якорном позиционировании центрирует позиционированный элемент относительно его якоря по блочной оси. Требует настройки якоря и поддержки CSS Anchor Positioning.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `align-self` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Почему выравнивание может не меняться

Свойство задано контейнеру вместо его элемента. Для общего выравнивания дочерних элементов используйте align-items.
Нет свободного места по оси выравнивания: размер элемента уже совпадает с размером строки или области сетки.
Во Flexbox у элемента есть автоматический отступ по поперечной оси: он получает свободное место раньше выравнивания. Например, при flex-direction: row это margin-top: auto или margin-bottom: auto, а не margin-left: auto. В Grid автоматические отступы по оси выравнивания также имеют приоритет.
Для stretch явно задан размер по оси выравнивания. Например, при горизонтальной строке Flexbox фиксированная height мешает растягиванию; проверьте также min-height и max-height.

Спецификация

CSS Box Alignment Module Level 3; значение anchor-center — CSS Anchor Positioning Module Level 1.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

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

Расположение flex-элементов

Измените flex-end на center или stretch. Меняется только второй элемент.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
.item {
    width: 44px;
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.container {
    background: #eef2f5;
    border: 1px dashed #8495a5;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Расположение flex-элементов</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

style.css

CSS

.container {
    display: flex;
    height: 160px;
    align-items: flex-start;
}
.target {
    align-self: flex-end;
}

Выравнивание в ячейке Grid

Остальные элементы растягиваются на всю высоту ячейки (normal). Замените center на end или stretch, затем измените justify-self на center: так выравнивание меняется по второй оси.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.container {
    background: #eef2f5;
    border: 1px dashed #8495a5;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Выравнивание в ячейке Grid</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

style.css

CSS

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 120px;
    gap: 8px;
}
.target {
    /* Выравнивает элемент по блочной оси внутри его ячейки. */
    align-self: center;
    /* Выравнивание по строчной оси задаёт justify-self. */
    justify-self: start;
}

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

Определение и применение

Попробуйте значения align-self

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

Начальное значение свойства

Значения свойства

Почему выравнивание может не меняться

Спецификация

Наследуется

Анимируемое

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

Расположение flex-элементов

Выравнивание в ячейке Grid

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