CSS place-content 屬性
示例
將 flex 行對齊到 flex 容器的底部，並在水平方向上使 flex 項之間具有相同的空間
#container {
display: flex;
place-content: end space-between;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
place-content 屬性用於 flexbox 和 grid 佈局，是以下屬性的簡寫屬性：
如果 place-content 屬性有兩個值
- place-content: start center;
- align-content 屬性值為 'start'
- justify-content 屬性值為 'center'
如果 place-content 屬性有一個值
- place-content: end;
- align-content 和 justify-content 屬性值均為 'end'
| 預設值 | normal |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.placeContent="end space-around" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| place-content | 59.0 | 79.0 | 53.0 | 11.0 | 46.0 |
CSS 語法
place-content: normal|value|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| normal | 預設值。取決於佈局上下文。與設定 align-content 和 justify-content 的 no property value 相同。 | 演示 ❯ |
| stretch | Grid：如果未設定大小，則拉伸 grid 專案以填充 grid 容器。 Flexbox：如果 flex 項在交叉軸上沒有指定大小，則拉伸 flex 項以填充 flex 容器。 |
演示 ❯ |
| start | 將專案對齊到容器的開頭 | 演示 ❯ |
| end | 將專案對齊到容器的末尾 | 演示 ❯ |
| center | 將專案對齊到容器的中心 | 演示 ❯ |
| space-between | 在容器的兩個軸上均勻分佈元素之間的可用額外空間。 | 演示 ❯ |
| space-around | 在容器的兩個軸上均勻分佈每個元素周圍的可用額外空間。 | 演示 ❯ |
| space-evenly | 在兩個軸上均勻分佈容器內的元素。 | 演示 ❯ |
| overflow-alignment |
|
|
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
Grid 示例
塊方向上的可用額外空間在每個 grid 項周圍均勻分佈，grid 項在內聯方向上對齊到中心
#container {
display: grid;
place-content: space-around center;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS Flexbox
CSS 教程： CSS Grid
CSS 參考：align-content 屬性
CSS 參考：justify-content 屬性
HTML DOM 參考：alignContent 屬性
