上次基準對齊

所有主要瀏覽器引擎現在都支援 CSS 格線和 flexbox 中的上次基準對齊。

Rachel Andrew

使用 first 和 last 關鍵字對齊的功能現在適用於所有主要引擎。這意味著在對齊彈性或格線項目群組時，我們可以使用上次的基準對齊做為另一個選項。

第一個基準對齊

如果將 align-items 的值設為 baseline，結果會是第一個基準對齊。因此，您要對齊的項目的第一個基準 (稱為「對齊主體」) 會與群組中其他項目的第一個基準相符。以下範例顯示前兩個彈性項目使用 align-items: baseline 對齊，因此它們會沿著較大的文字建立的基準線對齊。最終項目會與 flex-start 對齊，因此與 Flex 容器的起始位置對齊。

上次基準對齊

將格線或彈性項目與 last baseline 值對齊時，該項目的最後一個基準會與所屬基準分享群組的最後基準對齊。以下範例說明上次基準對齊，第一個彈性項目和大型項目中的最後一行文字對齊。此群組中的最後一個項目會與 flex-end 對齊，也就是 Flex 容器的結尾。

備用對齊方式

如果對齊主體沒有相應的基準共用群組，則會使用備用對齊方式。如果是 baseline 和 first baseline，其備用對齊方式為 start，last baseline 的備用對齊方式則為 end。