Align Items - выравнивание элементов на сайте

Свойство align-items в CSS используется для установки выравнивания элементов вдоль оси перпендикулярной главной оси flex-контейнера. Это свойство применяется только к контейнеру, а не к отдельным элементам.

При использовании значения flex-start, элементы будут выравниваться вверху контейнера, то есть они будут прижаты к его верху. Например:

.container {
  display: flex;
  align-items: flex-start;
}

При использовании значения flex-end, элементы будут выравниваться внизу контейнера, прижимаясь к его нижней границе:

.container {
  display: flex;
  align-items: flex-end;
}

Значение center выровняет элементы по центру контейнера:

.container {
  display: flex;
  align-items: center;
}

Значение baseline позволяет выровнять элементы по их базовой линии:

.container {
  display: flex;
  align-items: baseline;
}

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

.container {
  display: flex;
  align-items: stretch;
}

Давайте представим следующую разметку:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

Мы можем применить свойство align-items к контейнеру .container для определения выравнивания элементов:

.container {
  display: flex;
  align-items: center;
}

Это приведет к тому, что элементы .item будут выровнены по центру контейнера.

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