手册
目录
收藏863
分享
阅读1027
更新时间2025-07-16
justify-items 属性在网格容器上进行设置，使子元素（网格项）在行内方向对齐。
对于英文页面，行内方向是从左到右，块方向是向下。
如需使此属性具有任何对齐效果，网格项需要在行内方向上在自身周围留出可用空间。
提示：如需在块方向而不是行内方向对齐网格项目，请使用 align-items 属性 属性。
CSS 教程：CSS Grid
CSS 教程：CSS 定位
CSS 参考手册：align-items 属性
CSS 参考手册：direction 属性
CSS 参考手册：grid 属性
CSS 参考手册：grid-template-columns 属性
CSS 参考手册：justify-self 属性
CSS 参考手册：position 属性
CSS 参考手册：writing-mode 属性
将每个网格项目在其网格单元的末尾沿行内方向对齐：
#container {
display: grid;
justify-items: end;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
相对于容器的对齐方式设置为“居中”，网格项目本身设置为“右对齐”。属性值 'right' 占上风：
#container {
display: grid;
justify-items: center;
}
.blue {
justify-self: right;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
设置绝对定位的网格项的对齐方式为“右对齐”：
#container {
display: grid;
position: relative;
justify-items: right;
}
.blue {
position: absolute;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
当网格容器元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向为向下。结果是容器的起点从左侧移到顶部，容器的末端从右侧移到底部：
#container {
justify-items: end;
writing-mode: vertical-rl;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
网格容器元素的 direction 属性值设置为“rtl”时，行内方向是从右到左。结果是容器的起点从左侧移到右侧，容器的末端从右侧移到左侧：
#container {
justify-items: start;
direction: rtl;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
justify-items: legacy|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;
| 值 | 描述 |
|---|---|
| legacy |
默认值。 仅在以'legacy'开头时，justify-self 值为'auto'的网格项继承网格容器的 justify-items 属性值。 它的存在是为了实现 HTML 的 |
| normal | 取决于布局上下文，但类似于网格布局的 'stretch'。 |
| stretch | 如果未设置 inline-size（宽度），则拉伸以填充网格单元格。 |
| start | 在行内方向开头对齐项目。 |
| left | 将项目左对齐。 |
| center | 将项目对齐到中心。 |
| end | 在行内方向的末尾对齐项目。 |
| right | 将项目右对齐。 |
| overflow-alignment |
|
| baseline-alignment | 元素与父元素的基线对齐。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
| 默认值： | legacy |
|---|---|
| 继承： | 否 |
| 动画制作： | 不支持。请参阅：动画相关属性。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.justifyItems="center" |
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | IE / Edge | Firefox | Safari | Opera |
| 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
相关
视频
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万人学习
