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 属性