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|value|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 默认。元素的默认 place-self 值。 | 演示 ❯ |
| normal | 取决于布局上下文，但对于网格布局的网格项目（当未设置大小时），类似于“stretch”。如果设置了大小，则属性值的行为类似于“start”。 | 演示 ❯ |
| stretch | 如果未设置大小，则拉伸以填充网格单元格。 | 演示 ❯ |
| start | 在内联和块方向上将项目对齐到开头 | 演示 ❯ |
| left | 将项目在内联方向上对齐到左侧，作为 justify-self 属性值。 | 演示 ❯ |
| center | 将项目对齐到中心 | 演示 ❯ |
| end | 在内联和块方向上将项目对齐到末尾 | 演示 ❯ |
| right | 将项目在内联方向上对齐到右侧，作为 justify-self 属性值。 | 演示 ❯ |
| overflow-alignment |
|
|
| 基线对齐 | 元素与其父元素的基线对齐。 | 演示 ❯ |
| initial | 将此属性设置为其默认值。 了解 initial | |
| inherit | 从其父元素继承此属性。 了解 inherit |
更多示例
书写模式
当 <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 网格
CSS 教程： CSS Flexbox
CSS align-self 属性： CSS align-self 属性
CSS jusitfy-self 属性： CSS justify-self 属性
CSS writing-mode 属性： CSS writing-mode 属性
