CSS place-self 属性
更多“自己尝试”的例子见下文。
定义和用法
place-self 属性用于对齐单个网格项，它是以下属性的简写形式：
如果 place-self 属性有两个值
- place-self: start center;
- align-self 属性值为 'start'
- justify-self 属性值为 'center'
如果 place-self 属性只有一个值
- place-self: end;
- align-self 和 justify-self 属性值均为 'end'
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| place-self | 59.0 | 79.0 | 45.0 | 11.0 | 46.0 |
CSS 语法
place-self: auto|值|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 默认值。元素的默认 place-self 值。 | 演示 ❯ |
| normal | 取决于布局上下文，但对于未设置大小的网格项，在网格布局中类似于 'stretch'。如果设置了大小，该属性值表现得像 'start'。 | 演示 ❯ |
| stretch | 如果未设置大小，则拉伸以填充网格单元格。 | 演示 ❯ |
| start | 在行内和块状方向上将项对齐到开始位置 | 演示 ❯ |
| left | 在行内方向上将项对齐到左侧，作为 justify-self 属性值。 | 演示 ❯ |
| center | 将项对齐到中心 | 演示 ❯ |
| end | 在行内和块状方向上将项对齐到末尾 | 演示 ❯ |
| right | 在行内方向上将项对齐到右侧，作为 justify-self 属性值。 | 演示 ❯ |
| overflow-alignment |
|
|
| baseline alignment | 元素与父元素的基线对齐。 | 演示 ❯ |
| initial | 将此属性设置为其默认值。阅读关于initial | |
| inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
Writing-mode
当 <div> 元素的 writing-mode 属性值为 'vertical-rl' 时，块状方向的网格单元格末尾从底部移到左侧，行内方向的网格单元格末尾从右侧移到底部。
#contianer {
display: grid;
writing-mode: vertical-rl;
}
#myDiv {
place-self: end;
}
自己动手试一试 »
Flexbox
place-self 属性也可用于 flexbox 项目，但对于 justify-self 的第二个值将被忽略，因为它不适用于 flexbox。
#contianer {
display: flex;
}
#myDiv {
place-self: end stretch;
}
自己动手试一试 »
相关页面
CSS 教程： CSS Grid
CSS 教程：CSS Flexbox
CSS align-self 属性：CSS align-self 属性
CSS justify-self 属性：CSS justify-self 属性
CSS writing-mode 属性：CSS Writing-mode 属性
