CSS justify-self 属性
更多“自己尝试”的例子见下文。
定义和用法
justify-self 属性在行内方向上对齐网格项在其网格单元格内。
对于英文页面，行内方向是从左到右，块方向是从下到上。
要使此属性产生任何对齐效果，网格项需要在其行内方向周围有可用空间。
提示：要将网格项对齐到块方向而不是行内方向，请使用 align-self 或 align-items 属性。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| justify-self | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
CSS 语法
justify-self: auto|normal|stretch| positional alignment|overflow-alignment|baseline alignment|initial|inherit;
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| auto | 默认值。网格容器的 justify-self 属性值是继承的。 | 演示 ❯ |
| normal | 取决于布局上下文，但对于未设置大小的网格项，它在网格布局中类似于 'stretch'。如果设置了大小，属性值将表现得像 'start'。 | 演示 ❯ |
| stretch | 如果未设置行内大小（宽度），则拉伸以填充网格单元格。 | 演示 ❯ |
| start | 在行内方向的起始位置对齐项 | 演示 ❯ |
| left | 左对齐项 | 演示 ❯ |
| center | 将项对齐到中心 | 演示 ❯ |
| end | 在行内方向的结束位置对齐项 | 演示 ❯ |
| right | 右对齐项 | 演示 ❯ |
| overflow-alignment |
|
|
| baseline alignment | 元素与父元素的基线对齐。 | 演示 ❯ |
| initial | 将此属性设置为其默认值。阅读关于initial | |
| inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
justify-self 与 justify-items
通过 justify-items 属性将对齐方式设置为容器的 'center'，并通过 justify-self 属性将网格项本身设置为 'right'。属性值 'right' 优先。
#container {
display: grid;
justify-items: center;
}
.blue {
justify-self: right;
}
自己动手试一试 »
绝对定位的网格项上的 justify-self
对于绝对定位的网格项，对齐方式设置为 'right'。
#container {
display: grid;
position: relative;
}
.red {
position: absolute;
justify-self: right;
}
自己动手试一试 »
writing-mode
当网格容器元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向向下。结果是容器的起始位置从左侧移动到顶部，结束位置从右侧移动到底部。
#container {
display: grid;
writing-mode: vertical-rl;
}
.blue {
justify-self: end;
}
自己动手试一试 »
direction
当网格容器元素的 direction 属性值设置为 'rtl' 时，行内方向是从右到左。结果是容器的起始位置从左侧移动到右侧，结束位置从右侧移动到左侧。
#container {
display: grid;
direction: rtl;
}
.blue {
justify-self: end;
}
自己动手试一试 »
相关页面
CSS 教程： CSS Grid
CSS 教程：CSS 定位
CSS 参考：align-content 属性
CSS 参考： align-items 属性
CSS 参考：align-self 属性
CSS 参考：direction 属性
CSS 参考：grid 属性
CSS 参考：grid-template-columns 属性
CSS 参考：position 属性
CSS 参考：writing-mode 属性
