<content-distribution>

<content-distribution> 列舉值型別由 justify-contentalign-content 屬性,以及 place-content 簡寫屬性使用,用於在容器的對齊主體之間分配額外空間。

語法

<content-distribution> = space-between | space-around | space-evenly | stretch

以下關鍵詞值由 <content-distribution> 語法術語表示:

space-between

在對齊容器內均勻分佈對齊主體。第一個專案與對齊容器的起始邊緣對齊,最後一個專案與對齊容器的結束邊緣對齊,其餘專案均勻分佈,使得任意兩個相鄰專案之間的間距相同。space-between 的預設回退對齊方式在彈性佈局中是 safe flex-start,否則是 start。如果只有一個專案,該專案將與起始邊緣對齊。

space-around

專案在容器中均勻分佈,兩端各有一個半尺寸的空間。任意兩個相鄰專案之間的間距相同,且第一個專案之前和最後一個專案之後的間距是其他間距的一半。space-around 的預設回退對齊方式是 safe center。如果容器只有一個子項,該專案將居中。

space-evenly

專案在容器中均勻分佈,兩端各有一個完整尺寸的空間。任意兩個相鄰專案之間、第一個專案之前和最後一個專案之後的間距都相同。space-evenly 的預設回退對齊方式是 safe center。如果容器只有一個子項,該專案將居中。

stretch

如果專案的總尺寸小於容器的尺寸,任何可以增長的專案將等比例(非按比例)增加其尺寸,同時仍然遵循由 max-heightmax-width 或等效功能施加的約束,以使專案的總尺寸正好填滿容器。stretch 的預設回退對齊方式在彈性盒子中是 flex-start,在其他佈局模式中是 start。如果只有一個專案,並且該專案可以增長,它將增長以填滿容器。

規範

規範
CSS Box Alignment Module Level 3
# typedef-content-distribution

另見