Align Items: The Ultimate Guide To Perfectly Arranging Website Elements

Свойство align-items задает выравнивание элементов по поперечной оси (вертикальной для горизонтального контейнера и горизонтальной для вертикального контейнера) внутри контейнера.

Значение данного свойства может принимать одно из следующих значений:

• flex-start - все элементы выравниваются по началу крестовой оси.
• flex-end - все элементы выравниваются по концу крестовой оси.
• center - все элементы выравниваются по центру крестовой оси.
• baseline - все элементы выравниваются по базовой линии (средней линии текстовых элементов) крестовой оси.
• stretch - все элементы растягиваются по высоте/ширине контейнера до соответствующей высоты/ширины крестовой оси.

Примеры использования:

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

• В данном примере все элементы внутри контейнера будут выравниваться по центру крестовой оси.

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

• В данном примере все элементы внутри контейнера будут растягиваться по высоте контейнера.

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

• В данном примере все элементы внутри контейнера будут выравниваться по базовой линии крестовой оси.

Код HTML для примера:

html

  
Item 1
  
Item 2
  
Item 3

Код CSS для примера:

css
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background-color: #dbd7d7;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #b3b3b3;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

В данном примере элементы в контейнере выравниваются по центру крестовой оси, а так же выравниваются по центру главной оси, благодаря свойству justify-content со значением center. Каждый элемент имеет фиксированный размер и находится внутри блока с заданными отступами.