CSS place-content 屬性

定義和用法

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'

實例

例子 1

指定彈性行在彈性容器底部對齊，并水平方向使彈性項目之間的間距相等：

#container {
  display: flex;
  place-content: end space-between;
}

親自試一試

例子 2：網格布局

塊方向上的額外空間均勻分布在每個網格項目周圍，且網格項目在行內方向上居中對齊：

#container {
  display: grid;
  place-content: space-around center;
}

親自試一試

CSS 語法

place-content: normal|value|initial|inherit;

屬性值

值 描述
normal

默認值。取決于布局上下文。

等同于不為 align-content 和 justify-content 設置屬性值。
stretch

網格：如果未設置大小，則網格項目會拉伸以填滿網格容器。

彈性盒：如果彈性項目在交叉軸上未指定大小，則會在交叉軸上拉伸以填滿彈性容器。
start 將項目對齊到容器的開始位置。
end 將項目對齊到容器的結束位置。
center 將項目對齊到容器的中心位置。
space-between 在容器的兩個軸上均勻分布可用空間，使項目之間的間距相等。
space-around 在容器的兩個軸上均勻分布可用空間，使每個項目周圍的間距相等。
space-evenly 在容器的兩個軸上均勻分布項目。
overflow-alignment

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

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

技術細節

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

瀏覽器支持

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

Chrome Edge Firefox Safari Opera
59.0 79.0 53.0 11.0 46.0

相關頁面

教程：CSS 網格布局

教程：CSS 彈性盒布局

參考：CSS align-content 屬性

參考：CSS justify-content 屬性

參考：HTML DOM alignContent 屬性