上次基準對齊

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

瀏覽器支援

  • 108
  • 108
  • 52
  • 16.2

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

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

上次基準對齊

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

備用對齊方式

如果對齊主體沒有相應的基準共用群組,則會使用備用對齊方式。如果是 baselinefirst baseline,其備用對齊方式為 startlast baseline 的備用對齊方式則為 end