手册
目录
收藏988
分享
阅读1027
更新时间2025-07-16
place-self 属性用于对齐单个网格项目，是以下属性的简写：
align-selfjustify-selfplace-self: start center;
place-self: end;
将单个网格项目在块方向和行内方向上都对齐到结束位置：
#myDiv {
place-self: end;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
当
#contianer {
display: grid;
writing-mode: vertical-rl;
}
#myDiv {
place-self: end;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
place-self 属性也可以用于弹性盒布局项目，但 justify-self 的第二个值将被忽略，因为它在弹性盒布局中不适用：
#contianer {
display: flex;
}
#myDiv {
place-self: end stretch;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
place-self: auto|value|initial|inherit;
| 值 | 描述 |
|---|---|
| auto | 默认。元素的默认 place-self 值。 |
| normal |
取决于布局上下文，但对于未设置大小的网格项目，其行为类似于网格布局中的 'stretch'。 如果设置了大小，属性值的行为类似于 'start'。 |
| stretch | 如果未设置大小，则拉伸以填满网格单元格。 |
| start | 在行内方向和块方向上将项目对齐到开始位置。 |
| left | 在行内方向上将项目对齐到左侧，作为 justify-self 属性的值。 |
| center | 将项目对齐到中心。 |
| end | 在行内方向和块方向上将项目对齐到结束位置。 |
| right | 在行内方向上将项目对齐到右侧，作为 justify-self 属性的值。 |
| overflow-alignment |
'safe'：如果内容溢出，则将项目对齐设置为 'start' 'unsafe'：无论项目内容是否溢出，都保持对齐值 |
| baseline alignment | 元素与父元素的基线对齐。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
| 默认值： | auto |
|---|---|
| 继承性： | 否 |
| 动画制作： | 不支持。请参阅：动画相关属性。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.placeSelf="end stretch" |
表格中的数字表示首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 59.0 | 79.0 | 45.0 | 11.0 | 46.0 |
教程：CSS 网格布局
教程：CSS 弹性盒布局
参考：CSS align-self 属性
参考：CSS justify-self 属性
参考：CSS writing-mode 属性
相关
视频
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万人学习
