手册
目录
收藏574
分享
阅读1027
更新时间2025-07-16
place-content 属性用于弹性盒（flexbox）和网格（grid）布局，是以下属性的简写：
align-contentjustify-contentplace-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 |
教程：CSS 网格布局
教程：CSS 弹性盒布局
参考：CSS align-content 属性
参考：CSS justify-content 属性
参考：HTML DOM alignContent 属性
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
