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

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

Примечание: Это свойство применяется только к flex- и grid-контейнерам.

Это свойство входит в число свойств CSS3.

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

stretch
flex-start
center
flex-end
baseline

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

Синтаксис

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

css

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

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

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

html

<!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>

Try it Yourself »

Результат

Свойство CSS align-items со значением stretch

В следующем примере элементы расположены по центру контейнера.

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

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

html

<!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>

Try it Yourself »

В следующем примере элементы размещены в начале.

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

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

html

<!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>

Try it Yourself »

Здесь мы применяем значение "flex-end", которое размещает элементы в конце контейнера.

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

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

html

<!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>

Try it Yourself »

Рассмотрим последний пример со значением "baseline", которое размещает элементы по базовой линии контейнера.

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

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

html

<!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>

Try it Yourself »

Результат

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

Значения

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

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

Синтаксис ​

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

Результат ​

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

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

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

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

Результат ​

Значения ​

Практика ​

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

Синтаксис

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

Результат

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

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

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

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

Результат

Значения

Практика