Flex-Start и базовое выравнивание во Flexbox

При работе со свойством CSS Flexbox align-self необходимо понять разницу между flex-start и базовый уровень имеет решающее значение. Хотя на первый взгляд может показаться, что они дают один и тот же результат, в определенных сценариях они ведут себя по-разному.

Выравнивание гибкого начала

flex-start выравнивает гибкие элементы в начале край поперечной оси гибкого контейнера. Обычно это верх для горизонтальной ориентации и левый для вертикальной ориентации.

Выравнивание по базовой линии

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

Различия

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

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

Пример

Рассмотрите следующий код :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  padding: 5px;
  text-align: center;
}

С помощью этого кода гибкие элементы выравниваются по их базовым линиям. Создается следующий вывод:

  
A
  
B
  
C
  
D
  
E

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