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

Свойство align-items из CSS задаёт значение align-self для всех непосредственных дочерних элементов как группы. Во flexbox оно управляет выравниванием элементов по поперечной оси. В макете grid оно управляет выравниванием элементов по блочной оси внутри их областей сетки.

В интерактивном примере ниже используется макет grid, чтобы показать некоторые значения этого свойства.

Попробуйте

align-items: stretch;

align-items: center;

align-items: start;

align-items: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  width: 200px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Синтаксис

/* Basic keywords */
align-items: normal;
align-items: stretch;

/* Positional alignment */
/* align-items does not take left and right values */
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;
align-items: anchor-center;

/* 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: revert;
align-items: revert-layer;
align-items: unset;

Значения

Этому свойству задаётся одно или два из следующих ключевых слов:

normal

Действие этого ключевого слова зависит от используемого режима макета:

• В макетах с абсолютным позиционированием ключевое слово ведёт себя как start для замещаемых абсолютно позиционированных блоков и как stretch для всех остальных абсолютно позиционированных блоков.
• В статическом положении макетов с абсолютным позиционированием ключевое слово ведёт себя как stretch.
• Для flex-элементов ключевое слово ведёт себя как stretch.
• Для grid-элементов это ключевое слово приводит к поведению, похожему на stretch, за исключением блоков с соотношением сторон или внутренним размером, для которых оно ведёт себя как start.
• Свойство не применяется к блочным элементам и ячейкам таблиц.

center

Блоки внешних отступов flex-элементов центрируются внутри строки по поперечной оси. Если поперечный размер элемента превышает размер flex-контейнера, он будет одинаково выступать за его границы в обоих направлениях.

start

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

end

Элементы располагаются вплотную друг к другу у конечного края контейнера выравнивания по соответствующей оси.

self-start

Элементы располагаются вплотную к краю начальной стороны элемента в контейнере выравнивания по соответствующей оси.

self-end

Элементы располагаются вплотную к краю конечной стороны элемента в контейнере выравнивания по соответствующей оси.

baseline, first baseline, last baseline

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

stretch

Если поперечный размер элемента равен auto, используемый размер задаётся таким, чтобы максимально заполнить контейнер, с учётом ограничений ширины и высоты элемента. Если размер элемента не является автоматическим, это значение заменяется на flex-start, а также на self-start или self-end, если значение свойства align-content контейнера равно first baseline (или baseline) или last baseline.

anchor-center

Для элементов с позиционированием относительно якоря выравнивает элементы по центру связанного элемента-якоря в направлении блока. См. раздел Центрирование относительно якоря с помощью anchor-center.

safe

Используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово приводит к переполнению контейнера выравнивания и потере данных, элемент выравнивается так, как если бы режимом выравнивания было start.

unsafe

Используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания, а также от вероятности переполнения с потерей данных, заданное значение выравнивания применяется.

Также существуют два значения, определённые для flexbox на основе концепций осей flex-модели; они работают и в макетах grid:

flex-start

Используется только в flex-макете; выравнивает flex-элементы вплотную к стороне начала главной или поперечной оси flex-контейнера. При использовании вне контекста форматирования flex это значение ведёт себя как start.

flex-end

Используется только в flex-макете; выравнивает flex-элементы вплотную к стороне конца главной или поперечной оси flex-контейнера. При использовании вне контекста форматирования flex это значение ведёт себя как end.

Формальное определение

Формальный синтаксис

align-items = 
  normal |
  stretch |
  <baseline-position> |
  [ <overflow-position>? <self-position> ] |
  anchor-center

<baseline-position> = 
  [ first | last ]? baseline

<overflow-position> = 
  unsafe |
  safe

<self-position> = 
  center |
  start |
  end |
  self-start |
  self-end |
  flex-start |
  flex-end

Примеры

В этом примере есть контейнер с шестью дочерними элементами. Выпадающее меню <select> позволяет переключать значение display контейнера между grid и flex. Второе меню позволяет изменять значение свойства align-items контейнера.

CSS

Мы задаём стили контейнеру и элементам так, чтобы они располагались в двух линиях или строках. Мы определили классы .flex и .grid, которые будут применяться к контейнеру с помощью JavaScript. Они задают значение display контейнера и меняют цвета фона и границы, дополнительно показывая изменение макета. У каждого из шести flex-элементов свой цвет фона; четвёртый элемент занимает две строки, а у шестого увеличен размер шрифта.

.flex,
.grid {
  height: 200px;
  width: 500px;
  align-items: initial; /* Change the value in the live sample */
  border: solid 5px transparent;
  gap: 3px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  background-color: #8c8c9f;
  border-color: magenta;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  background-color: #9f8c8c;
  border-color: slateblue;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

div > div {
  box-sizing: border-box;
  border: 2px solid white;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML

Мы добавляем контейнер <div> с шестью вложенными дочерними элементами <div>. HTML-код формы и JavaScript-код, изменяющий класс контейнера, скрыты для краткости.

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4<br />line 2</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

const values = document.getElementById("values");
const display = document.getElementById("display");
const container = document.getElementById("container");

values.addEventListener("change", (evt) => {
  container.style.alignItems = evt.target.value;
});

display.addEventListener("change", (evt) => {
  container.className = evt.target.value;
});

Результат

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

Совместимость с браузерами

См. также

• align-self
• align-content
• justify-items
• place-items — сокращённое свойство
• Основные понятия flexbox
• Выравнивание элементов во flex-контейнере
• Выравнивание блоков в макете grid
• Выравнивание блоков CSS — модуль
• Гибкая компоновка CSS — модуль
• Компоновка CSS с помощью grid — модуль