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'

實例

例子 1

將單個網格項目在塊方向和行內方向上都對齊到結束位置：

#myDiv {
  place-self: end;
}

親自試一試

例子 2：書寫模式

當 <div> 元素的 writing-mode 屬性值設置為 'vertical-rl' 時，網格單元格在塊方向的結束位置從底部移動到左側，在行內方向的結束位置從右側移動到底部：

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

親自試一試

例子 3：彈性盒布局

place-self 屬性也可以用于彈性盒布局項目，但 justify-self 的第二個值將被忽略，因為它在彈性盒布局中不適用：

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

親自試一試

CSS 語法

place-self: auto|value|initial|inherit;

屬性值

值 描述
auto 默認。元素的默認 place-self 值。
normal

取決于布局上下文，但對于未設置大小的網格項目，其行為類似于網格布局中的 'stretch'。

如果設置了大小，屬性值的行為類似于 'start'。
stretch 如果未設置大小，則拉伸以填滿網格單元格。
start 在行內方向和塊方向上將項目對齊到開始位置。
left 在行內方向上將項目對齊到左側，作為 justify-self 屬性的值。
center 將項目對齊到中心。
end 在行內方向和塊方向上將項目對齊到結束位置。
right 在行內方向上將項目對齊到右側，作為 justify-self 屬性的值。
overflow-alignment

'safe'：如果內容溢出，則將項目對齊設置為 'start'

'unsafe'：無論項目內容是否溢出，都保持對齊值
baseline alignment 元素與父元素的基線對齊。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： auto
繼承性： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.placeSelf="end stretch"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
59.0 79.0 45.0 11.0 46.0

相關頁面

教程：CSS 網格布局

教程：CSS 彈性盒布局

參考：CSS align-self 屬性

參考：CSS justify-self 屬性

參考：CSS writing-mode 屬性