align-items

Ниже представлен интерактивный пример, демонстрирующий некоторые значения для align-items с использованием сетки и flex-макета.

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

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

anchor-center

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

safe

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

unsafe

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

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

flex-start

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

flex-end

Используется только в flex-макете, выравнивает flex-элементы плотно к стороне main-end или cross-end контейнера 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 контейнера.

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

.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;
}

Мы включаем контейнер <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>

• align-self
• align-content
• justify-items
• place-items сокращение
• Основные понятия flexbox
• Выравнивание элементов в flex-контейнере
• Выравнивание блоков в CSS-сетках
• Модуль CSS выравнивания блоков
• Модуль CSS гибкого макета
• Модуль CSS сетки