属性 CSS place-content

Definisi dan penggunaan

place-content Properti ini digunakan untuk bentuk kotak kelajuan (flexbox) dan bentuk grid, adalah singkatan untuk berikut ini properti:

place-content: start center;

place-content: end;

Pengesanan kelajuan di dasar kontainer kelajuan, dan mengatur jarak antara objek kelajuan secara horizontal:

#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