ເຄື່ອງຍົກຮູບ CSS place-content

定义和用法

place-content 属性用于弹性盒（flexbox）和网格（grid）布局，是以下属性的简写：

place-content: start center;

place-content: end;

指定弹性行在弹性容器底部对齐，并水平方向使弹性项目之间的间距相等：

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

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

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

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