CSS justify-self 属性
下面还有更多“尝试一下”示例。
定义和用法
The justify-self 属性在内联方向上将网格项目与其网格单元格对齐。
对于英文页面，内联方向为从左到右，块方向为向下。
为了使此属性产生任何对齐效果，网格项目需要在内联方向上有可用空间。
提示： 要在块方向而不是内联方向上对齐网格项目，请使用 align-self 或 align-items 属性。
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| justify-self | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
CSS 语法
justify-self: auto|normal|stretch|定位对齐|溢出对齐|基线对齐|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 网格
CSS 教程： CSS 定位
CSS 参考： align-content 属性
CSS 参考： align-items 属性
CSS 参考： align-self 属性
CSS 参考： direction 属性
CSS 参考： grid 属性
CSS 参考： grid-template-columns 属性
CSS 参考： position 属性
CSS 参考： writing-mode 属性
