CSS place-self 屬性
更多“自己嘗試”的例子見下文。
定義和用法
place-self 屬性用於對齊單個網格項，它是以下屬性的簡寫形式：
如果 place-self 屬性有兩個值
- place-self: start center;
- align-self 屬性值為 'start'
- justify-self 屬性值為 'center'
如果 place-self 屬性只有一個值
- place-self: end;
- align-self 和 justify-self 屬性值均為 'end'
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| place-self | 59.0 | 79.0 | 45.0 | 11.0 | 46.0 |
CSS 語法
place-self: auto|值|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 預設值。元素的預設 place-self 值。 | 演示 ❯ |
| normal | 取決於佈局上下文，但對於未設定大小的網格項，在網格佈局中類似於 'stretch'。如果設定了大小，該屬性值表現得像 'start'。 | 演示 ❯ |
| stretch | 如果未設定大小，則拉伸以填充網格單元格。 | 演示 ❯ |
| start | 在行內和塊狀方向上將項對齊到開始位置 | 演示 ❯ |
| left | 在行內方向上將項對齊到左側，作為 justify-self 屬性值。 | 演示 ❯ |
| center | 將項對齊到中心 | 演示 ❯ |
| end | 在行內和塊狀方向上將項對齊到末尾 | 演示 ❯ |
| right | 在行內方向上將項對齊到右側，作為 justify-self 屬性值。 | 演示 ❯ |
| overflow-alignment |
|
|
| baseline alignment | 元素與父元素的基線對齊。 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
Writing-mode
當 <div> 元素的 writing-mode 屬性值為 'vertical-rl' 時，塊狀方向的網格單元格末尾從底部移到左側，行內方向的網格單元格末尾從右側移到底部。
#contianer {
display: grid;
writing-mode: vertical-rl;
}
#myDiv {
place-self: end;
}
自己動手試一試 »
Flexbox
place-self 屬性也可用於 flexbox 專案，但對於 justify-self 的第二個值將被忽略，因為它不適用於 flexbox。
#contianer {
display: flex;
}
#myDiv {
place-self: end stretch;
}
自己動手試一試 »
相關頁面
CSS 教程： CSS Grid
CSS 教程：CSS Flexbox
CSS align-self 屬性：CSS align-self 屬性
CSS justify-self 屬性：CSS justify-self 屬性
CSS writing-mode 屬性：CSS Writing-mode 屬性
