Все основные браузерные движки теперь поддерживают выравнивание по последней базовой линии в CSS-сетке и флексбоксе.
Выравнивание по first и last ключевым словам теперь доступно во всех основных движках. Это означает, что мы можем использовать выравнивание по последней базовой линии в качестве еще одного варианта при выравнивании групп гибких элементов или элементов сетки.
Поддержка браузера
- 108
- 108
- 52
- 16.2
Первое выравнивание базовой линии
Если вы установите значение align-items на baseline , результатом будет первое выравнивание по базовой линии. Поэтому первая базовая линия выравниваемого элемента (называемая объектом выравнивания ) будет совмещена с первой базовой линией других элементов в группе. Вы можете увидеть это в следующем примере, где первые два гибких элемента выравниваются с помощью align-items: baseline , поэтому они выравниваются вдоль базовой линии, созданной более крупным текстом. Последний элемент выравнивается по flex-start и, следовательно, выравнивается по началу гибкого контейнера.
Последнее выравнивание базовой линии
При выравнивании элемента сетки или гибкого элемента по значению last baseline последняя базовая линия этого элемента будет совмещена с последней базовой линией группы общего доступа к базовой линии , частью которой он является. В следующем примере показано выравнивание последней базовой линии, при этом первый гибкий элемент выравнивается по последней строке текста в более крупном элементе. Последний элемент в этой группе выравнивается по flex-end , который является концом гибкого контейнера.
Резервное выравнивание
Если у субъекта выравнивания нет базовой группы общего доступа для согласования, то будет использоваться резервное выравнивание. Для baseline и first baseline резервное выравнивание start , а для last baseline резервное выравнивание end .