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

Свойство CSS align-items задаёт выравнивание по умолчанию для элементов flex (и элементов grid) вдоль поперечной оси их контейнера. Оно является парным для justify-content, который выравнивает элементы вдоль главной оси.

На этой странице объясняется, что такое поперечная ось, рассматривается каждое значение с рабочим примером, а также показано, как align-items соотносится с align-self и align-content.

Понимание поперечной оси

В flex-контейнере главная ось — это направление потока элементов, задаваемое свойством flex-direction. Поперечная ось перпендикулярна ей:

flex-direction: row (по умолчанию) → главная ось горизонтальная, значит поперечная ось вертикальная, и align-items управляет вертикальным выравниванием.
flex-direction: column → главная ось вертикальная, значит поперечная ось горизонтальная, и align-items управляет горизонтальным выравниванием.

Поскольку ось зависит от flex-direction, вместо top/bottom используются названия flex-start и flex-end — они всегда означают «начало поперечной оси» и «конец поперечной оси» независимо от направления.

Примечание: align-items применяется только к flex- и grid-контейнерам — оно не оказывает эффекта на элемент с display: block по умолчанию. Сначала задайте display: flex (или display: grid) на родительском элементе.

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

Классический вариант использования — вертикальное центрирование: display: flex; align-items: center центрирует дочерние элементы по вертикали без отступов или абсолютного позиционирования. Сочетайте с justify-content: center, чтобы центрировать элемент по обеим осям — давняя задача «отцентрировать div» решается двумя строками.

align-items vs. align-self vs. align-content

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

Это свойство входит в свойства CSS3.

Свойство align-items принимает следующие значения:

stretch
flex-start
center
flex-end
baseline

Начальное значение	stretch
Применяется к	Flex- и grid-контейнерам.
Наследуется	Нет.
Анимируемое	Нет.
Версия	CSS3
DOM Синтаксис	object.style.alignItems = "center";

Синтаксис

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

Примеры

stretch (по умолчанию)

При значении stretch элементы растягиваются, чтобы заполнить весь размер контейнера по поперечной оси (здесь — всю высоту), если у них нет фиксированной высоты.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: stretch;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

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

center

Элементы располагаются по центру поперечной оси (здесь — по вертикали).

Пример свойства CSS align-items со значением center

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: center;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: center; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

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

flex-start

Элементы размещаются в начале поперечной оси (сверху при flex-direction: row по умолчанию).

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

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: flex-start;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-start; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

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

flex-end

Элементы размещаются в конце поперечной оси (снизу при flex-direction: row по умолчанию).

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

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: flex-end;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: flex-end; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

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

baseline

Элементы выравниваются так, чтобы их базовые линии текста совпадали. Это полезно, когда элементы содержат текст разного размера шрифта и нужно, чтобы буквы располагались на общей линии.

Пример свойства CSS align-items со значением baseline

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        width: 220px;
        height: 300px;
        padding: 0;
        border: 1px solid #000;
        display: flex;
        align-items: baseline;
      }
      #example li {
        flex: 1;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-items: baseline; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;">Green</li>
      <li style="background-color:#1c87c9;">Blue</li>
      <li style="background-color:#ccc;">Gray</li>
    </ul>
  </body>
</html>

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

Значения

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

Распространённые ошибки

stretch не работает, если у элементов задан фиксированный размер по поперечной оси. Если у элемента уже есть height (в row-контейнере), stretch не сможет его растянуть. Уберите фиксированный размер, чтобы разрешить растяжение.
Ничего не происходит без flex- или grid-контейнера. align-items игнорируется, если у родителя нет display: flex или display: grid.
Ось меняется при flex-direction: column. Тогда align-items управляет горизонтальным выравниванием, а не вертикальным.
Чтобы выровнять только один элемент, используйте align-self на этом элементе вместо изменения всего контейнера.

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

justify-content — выравнивание по главной оси.
align-self — переопределение align-items для отдельного элемента.
align-content — выравнивание перенесённых строк как группы.
flex-direction — выбор главной оси.

Практика

Какие возможные значения имеет свойство 'align-items' в CSS?