<content-distribution>
<content-distribution> 列舉值型別由 justify-content 和 align-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-height、max-width或等效功能施加的約束,以使專案的總尺寸正好填滿容器。stretch的預設回退對齊方式在彈性盒子中是flex-start,在其他佈局模式中是start。如果只有一個專案,並且該專案可以增長,它將增長以填滿容器。
規範
| 規範 |
|---|
| CSS Box Alignment Module Level 3 # typedef-content-distribution |
另見
- 使用此資料型別的屬性:
align-content,justify-content,place-content - 其他盒子對齊資料型別:
<baseline-position>,<content-position>,<overflow-position>, 和<self-position> - CSS 盒模型對齊模組
- CSS 彈性盒子佈局模組
- CSS 網格佈局模組