Перейти к содержанию

align-items

Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.

Демо

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* Basic keywords */
align-items: normal;
align-items: stretch;

/* Positional alignment */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
align-items: self-start;
align-items: self-end;
align-items: left; /* Pack items from the left */
align-items: right; /* Pack items from the right */

/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;

/* Global values */
align-items: inherit;
align-items: initial;
align-items: unset;

Значения

ЗначениеПоложениеОписание
flex-startflex-startФлексы выравниваются в начале поперечной оси контейнера.
centercenterФлексы выравниваются по линии поперечной оси.
flex-endflex-endФлексы выравниваются в конце поперечной оси контейнера.
stretchstretchФлексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.
baselinebaselineФлексы выравниваются по их базовой линии.

Значение по-умолчанию: stretch

Наследуется: нет

Применяется к флекс-контейнеру

Анимируется: нет

Объектная модель: object.style.alignItems

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

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

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>align-items</title>
    <style>
      .flex-container {
        display: flex;
        align-items: stretch; /* Растягиваем */
      }
      .flex-item {
        margin-left: 1rem; /* Расстояние между блоков */
        padding: 10px; /* Поля вокруг текста */
        width: 33.333%; /* Ширина блоков */
      }
      .flex-item:first-child {
        margin-left: 0;
      }
      .item1 {
        background: #f0ba7d;
      }
      .item2 {
        background: #cae2aa;
      }
      .item3 {
        background: #a6c0c9;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item item1">
        Фенек — лисица, живущая в пустынях Северной Африки.
        Имеет достаточно миниатюрный размер и своеобразную
        внешность с большими ушами.
      </div>
      <div class="flex-item item2">
        Корсак — хищное млекопитающее рода лисиц.
      </div>
      <div class="flex-item item3">
        Лисица — хищное млекопитающее семейства псовых,
        наиболее распространённый и самый крупный вид рода
        лисиц.
      </div>
    </div>
  </body>
</html>

Примечание

Safari до версии 9 поддерживает свойство -webkit-align-items.

См. также

Комментарии