Последнее выравнивание базовой линии

Все основные браузерные движки теперь поддерживают выравнивание по последней базовой линии в CSS-сетке и флексбоксе.

Rachel Andrew

Выравнивание по first и last ключевым словам теперь доступно во всех основных движках. Это означает, что мы можем использовать выравнивание по последней базовой линии в качестве еще одного варианта при выравнивании групп гибких элементов или элементов сетки.

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

Если вы установите значение align-items на baseline , результатом будет первое выравнивание по базовой линии. Поэтому первая базовая линия выравниваемого элемента (описанная как объект выравнивания ) будет совмещена с первой базовой линией других элементов в группе. Вы можете увидеть это в следующем примере, где первые два гибких элемента выравниваются с помощью align-items: baseline , поэтому они выравниваются вдоль базовой линии, созданной более крупным текстом. Последний элемент выравнивается по flex-start и, следовательно, выравнивается по началу гибкого контейнера.

Последнее выравнивание базовой линии

При выравнивании элемента сетки или гибкого элемента по значению last baseline последняя базовая линия этого элемента будет совмещена с последней базовой линией группы общего доступа к базовой линии , частью которой он является. В следующем примере показано выравнивание последней базовой линии, при этом первый гибкий элемент выравнивается по последней строке текста в более крупном элементе. Последний элемент в этой группе выравнивается по flex-end , который является концом гибкого контейнера.

Резервное выравнивание

Если у субъекта выравнивания нет базовой группы общего доступа для согласования, то будет использоваться резервное выравнивание. Для baseline и first baseline резервное выравнивание start , а для last baseline резервное выравнивание end .