Базовое и гибкое выравнивание по началу

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

Базовая линия Выравнивание

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

Визуальная разница

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

Определение базовой линии

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

Пример

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

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

Элемент с самым большим размером шрифта, «B», будет определять базовую линию строки. Остальные элементы будут выровнены по базовой линии «B», как показано на рисунке ниже.

[Изображение гибких элементов, выровненных на разной высоте с использованием выравнивания по базовой линии]

Важное примечание

Ключевое слово baseline поддерживается не всеми браузерами. Для обеспечения кросс-браузерной совместимости рассмотрите возможность использования align-items: flex-start в сочетании со свойством CSS3verter-align.