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

❮ Назад Вперед ❯

CSS свойство align-items выравнивает flex-элементы. Похоже на свойство justify-content, но является перпендикулярной версией.

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

stretch
flex-start
center
flex-end
baseline

Значение по умолчанию	stretch
Применяется	Ко всем элементам.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.alignItems = "center";

Синтаксис

align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: stretch; /* Safari 7.0+ */
      display: flex;
      align-items: stretch;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Пример align-items: stretch;</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", где элементы расположены в центре контейнера:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: center; /* Safari 7.0+ */
      display: flex;
      align-items: center;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Пример align-items: center;</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", где элементы расположены в начале:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: flex-start; /* Safari 7.0+ */
      display: flex;
      align-items: flex-start;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Пример align-items: flex-start;</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", при котором элементы находятся в конце контейнера:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: flex-end; /* Safari 7.0+ */
      display: flex;
      align-items: flex-end;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Пример align-items: flex-end;</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", где элементы выравниваются по базовой линии контейнера:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #example {
      width: 220px;
      height: 300px;
      padding: 0;
      border: 1px solid #000;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: baseline; /* Safari 7.0+ */
      display: flex;
      align-items: baseline;
      }
      #example li {
      -webkit-flex: 1; /* Safari 6.1+ */
      flex: 1;
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>
    Пример align-items: baseline; 
    <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	Значение элемента наследуется от родительского элемента.


29.0+ 21-28 -webkit-	28.0+	9.0+ 6.1-8.0 -webkit-	12.1+

29.0+
21-28 -webkit-

28.0+

9.0+
6.1-8.0 -webkit-

12.1+

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

Синтаксис

Пример

Пример

Пример

Пример

Пример

Значения

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

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