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

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

Свойство align-items задаётся контейнеру и определяет выравнивание его непосредственных дочерних элементов. Во Flexbox (display: flex) элементы выравниваются по поперечной оси внутри своей строки. В Grid (display: grid) каждый элемент выравнивается внутри своей области сетки по блочной оси — при обычном горизонтальном направлении письма это вертикаль.

Во Flexbox направление поперечной оси зависит от flex-direction: при row она обычно вертикальная, при column — горизонтальная. Направление письма также влияет на оси.

Для отдельного элемента общее выравнивание можно изменить через align-self, а в Grid выравнивание по другой оси задаёт justify-items.

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

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

stretch растягивает элементы с auto-размером. baseline совмещает базовые линии содержимого. — Сравнение значений во Flexbox при `flex-direction: row` и `writing-mode: horizontal-tb`. При `stretch` поперечный размер элементов — `auto`; `baseline` совмещает базовые линии текста.

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

Выравниваются элементы в одной строке по поперечной оси. У второго элемента увеличен текст, чтобы было видно baseline.

align-items: stretch

HTML и CSS примера

HTML

<div class="stage demo-target">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</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;
}
.demo-target {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.item {
  width: 45px;
  min-height: 40px;
  flex-shrink: 0;
}
.item:nth-child(2) {
  font-size: 26px;
}

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;
}
.demo-target {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.item {
  width: 45px;
  min-height: 40px;
  flex-shrink: 0;
}
.item:nth-child(2) {
  font-size: 26px;
}

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;
}
.demo-target {
  display: flex;
  gap: 8px;
  align-items: center;
}
.item {
  width: 45px;
  min-height: 40px;
  flex-shrink: 0;
}
.item:nth-child(2) {
  font-size: 26px;
}

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;
}
.demo-target {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.item {
  width: 45px;
  min-height: 40px;
  flex-shrink: 0;
}
.item:nth-child(2) {
  font-size: 26px;
}

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;
}
.demo-target {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.item {
  width: 45px;
  min-height: 40px;
  flex-shrink: 0;
}
.item:nth-child(2) {
  font-size: 26px;
}

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

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

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

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

Совместимостьcss.properties.align-items
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`align-items`	✓29	✓12	✓20	✓16	✓9	✓29	✓20	✓16	✓9	✓2.0	✓4.4	✓9
`anchor-center`	✓125	✓125	✓147	✓111	✓26	✓125	✓147	✓83	✓26	✓27.0	✓125	✓26
В flex-контейнере	✓52	✓12	✓20	✓39	✓7	✓52	✓20	✓41	✓7	✓6.0	✓52	✓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	✓66	✓15.4	✓17.0	✓93	✓15.4
В grid-контейнере	✓57	✓16	✓52	✓44	✓10.1	✓52	✓52	✓43	✓10.3	✓6.2	✓57	✓10.3
start and end	✓57	✓79	✓52	✓44	✓11	✓57	✓52	✓43	✓11	✓7.0	✓57	✓11
Ещё 7 значений · поддерживаются везде более 3 летСвернуть

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

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

CSS синтаксис:

CSS

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

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

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

/* Поведение при переполнении: необязательный модификатор */
align-items: [ safe | unsafe ]? [ start | end | center | flex-start | flex-end | self-start | self-end ];

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

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

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

JavaScript синтаксис:

JavaScript

element.style.alignItems = "center";

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

normal.

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

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

Почему align-items не работает

Проверьте, что свойство задано Flexbox- или Grid-контейнеру. В обычном блоке display: block оно не выравнивает содержимое так, как align-content.
Для заметного перемещения внутри строки или ячейки нужно свободное место. Если элемент занимает её целиком, разницы между start и center не видно.
Если stretch не растягивает элемент, проверьте его размер по оси выравнивания. Например, при flex-direction: row заданная height мешает растягиванию по высоте.
Проверьте align-self у дочернего элемента: значение, отличное от auto, задаёт ему собственное выравнивание. Автоматические отступы margin по оси выравнивания также могут изменить результат.

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

CSS Box Alignment Module Level 3. Значение anchor-center описано в CSS Anchor Positioning Module Level 1.

Наследуется

Нет. Выравнивание дочерних элементов через align-self: auto не является наследованием свойства align-items.

Анимируемое

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

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

Выравнивание во Flexbox

В контейнере одна строка. Замените center на flex-start, flex-end или stretch. У элементов автоматическая высота: при stretch они растянутся по высоте контейнера.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.container {
    gap: 8px;
    padding: 8px;
    background: #edf2f5;
    border: 2px dashed #607589;
}
.item {
    padding: 8px;
    background: #b9d7eb;
    border: 1px solid #245a85;
    min-width: 0;
}
.item {
    flex: 1;
}

index.html

HTML

<div class="container">
  <div class="item">Одна строка</div>
  <div class="item">Две<br />строки</div>
  <div class="item">Три<br />строки<br />текста</div>
</div>

style.css

CSS

.container {
    display: flex;
    height: 240px; /* Свободное место по поперечной оси. */
    align-items: center;
}

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

Замените center на start, end или stretch. Каждый элемент выравнивается внутри своей ячейки; размеры строк сетки остаются прежними.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.container {
    gap: 8px;
    padding: 8px;
    background: #edf2f5;
    border: 2px dashed #607589;
}
.item {
    padding: 8px;
    background: #b9d7eb;
    border: 1px solid #245a85;
    min-width: 0;
}

index.html

HTML

<div class="container">
  <div class="item">Одна строка</div>
  <div class="item">Две<br />строки</div>
  <div class="item">Ещё один элемент</div>
  <div class="item">Три<br />строки<br />текста</div>
</div>

style.css

CSS

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 120px; /* Высота каждой строки сетки. */
    align-items: center;
}

Выравнивание по базовой линии

У надписей разный размер шрифта. Замените baseline на flex-start или center: сравните положение текста и верхних краёв рамок.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.container {
    gap: 8px;
    padding: 8px;
    background: #edf2f5;
    border: 2px dashed #607589;
}
.item {
    padding: 8px;
    background: #b9d7eb;
    border: 1px solid #245a85;
    min-width: 0;
}

index.html

HTML

<div class="container">
  <div class="item small">Текст</div>
  <div class="item large">Текст</div>
  <div class="item medium">Текст</div>
</div>

style.css

CSS

.container {
    display: flex;
    height: 200px;
    align-items: baseline; /* Совмещаем базовые линии текста. */
}
.small {
    font-size: 16px;
}
.large {
    font-size: 36px;
}
.medium {
    font-size: 24px;
}

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

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

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

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

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

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

Почему align-items не работает

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

Наследуется

Анимируемое

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

Выравнивание во Flexbox

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

Выравнивание по базовой линии

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