基線與Flex-Start 對齊

在靈活佈局中，flex-start 在橫軸的起點對齊項目，而基線將它們沿著內容的基線對齊。

基線對齊

作為顧名思義，基線對齊錨定了彈性項目的基線，即大多數字符所在的線。基線和交叉起始邊緣之間距離最大的項目將與此邊緣齊平。

視覺差異

當 Flex 專案的字體大小統一時或內容相同，Flex-Start 和 Baseline 可能看起來可以互換。但是，當項目大小不同時，就會出現差異。

確定基線

一行中最高的項目確定基線對齊的基線。

範例

考慮以下程式碼片段：

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

具有最大字體大小的項目「B」將確定該行的基準。其他項目將沿著“B”的基線對齊，如下圖所示。

[使用基線對齊方式在不同高度對齊的彈性項目的圖像]

重要提示

並非所有瀏覽器都支援基線關鍵字。為了跨瀏覽器相容性，請考慮將align-items: flex-start與CSS3的vertical-align屬性結合使用。