Last baseline alignment arrives across browsers
Support for last baseline alignment is now available in every major browser engine. With this update, both first and last keywords for baseline alignment can be used in CSS grid and flexbox for all modern users.
Browser support now includes Chrome 108, Edge 108, Firefox 52, and Safari 16.2.
Using first and last baseline keywords
When you set the align-items property to baseline, you get first baseline alignment by default. In this mode, the first baseline of each item—referred to as the alignment subject—lines up with the first baseline of other items in the same group. For example, two flex items using align-items: baseline will align along the baseline of the larger text, while a third item with align-items: flex-start will instead align to the start edge of the flex container.
Last baseline alignment works the same way but uses the final text line. With a value of last baseline, the last baseline of a grid or flex item aligns with the last baseline of its baseline sharing group. In a flex row, the first item will sit so its bottom text line matches that of the tallest item in the group, while an item set to flex-end will align to the end edge of the container.
Fallback behavior when no baseline exists
If an alignment subject has no baseline sharing group to align against, the browser falls back to a standard alignment value. For baseline and first baseline, the fallback is the start position (start). For last baseline, the fallback is the end position (end).
Because these fallbacks map to existing alignment options, layouts remain functional even when a baseline match isn’t possible.
