CSS justify-self 屬性
更多“自己嘗試”的例子見下文。
定義和用法
justify-self 屬性在行內方向上對齊網格項在其網格單元格內。
對於英文頁面，行內方向是從左到右，塊方向是從下到上。
要使此屬性產生任何對齊效果，網格項需要在其行內方向周圍有可用空間。
提示：要將網格項對齊到塊方向而不是行內方向，請使用 align-self 或 align-items 屬性。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| justify-self | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
CSS 語法
justify-self: auto|normal|stretch| positional alignment|overflow-alignment|baseline alignment|initial|inherit;
屬性值
| 值 | 描述 | 試一試 |
|---|---|---|
| auto | 預設值。網格容器的 justify-self 屬性值是繼承的。 | 演示 ❯ |
| normal | 取決於佈局上下文，但對於未設定大小的網格項，它在網格佈局中類似於 'stretch'。如果設定了大小，屬性值將表現得像 'start'。 | 演示 ❯ |
| stretch | 如果未設定行內大小（寬度），則拉伸以填充網格單元格。 | 演示 ❯ |
| start | 在行內方向的起始位置對齊項 | 演示 ❯ |
| left | 左對齊項 | 演示 ❯ |
| center | 將項對齊到中心 | 演示 ❯ |
| end | 在行內方向的結束位置對齊項 | 演示 ❯ |
| right | 右對齊項 | 演示 ❯ |
| overflow-alignment |
|
|
| baseline alignment | 元素與父元素的基線對齊。 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
justify-self 與 justify-items
透過 justify-items 屬性將對齊方式設定為容器的 'center'，並透過 justify-self 屬性將網格項本身設定為 'right'。屬性值 'right' 優先。
#container {
display: grid;
justify-items: center;
}
.blue {
justify-self: right;
}
自己動手試一試 »
絕對定位的網格項上的 justify-self
對於絕對定位的網格項，對齊方式設定為 'right'。
#container {
display: grid;
position: relative;
}
.red {
position: absolute;
justify-self: right;
}
自己動手試一試 »
writing-mode
當網格容器元素的 writing-mode 屬性值設定為 vertical-rl 時，行內方向向下。結果是容器的起始位置從左側移動到頂部，結束位置從右側移動到底部。
#container {
display: grid;
writing-mode: vertical-rl;
}
.blue {
justify-self: end;
}
自己動手試一試 »
direction
當網格容器元素的 direction 屬性值設定為 'rtl' 時，行內方向是從右到左。結果是容器的起始位置從左側移動到右側，結束位置從右側移動到左側。
#container {
display: grid;
direction: rtl;
}
.blue {
justify-self: end;
}
自己動手試一試 »
相關頁面
CSS 教程： CSS Grid
CSS 教程：CSS 定位
CSS 參考：align-content 屬性
CSS 參考： align-items 屬性
CSS 參考：align-self 屬性
CSS 參考：direction 屬性
CSS 參考：grid 屬性
CSS 參考：grid-template-columns 屬性
CSS 參考：position 屬性
CSS 參考：writing-mode 屬性
