CSS justify-items 属性
下面有更多“自己尝试”示例。
定义和用法
在网格容器上设置 justify-items 属性，以便子元素（网格项目）在内联方向上对齐。
对于英语页面，内联方向为从左到右，块方向为向下。
为了使此属性具有任何对齐效果，网格项目需要在内联方向上围绕自身留出可用空间。
提示： 要在块方向而不是内联方向上对齐网格项目，请使用 align-items 属性。
| 默认值 | legacy |
|---|---|
| 继承 | 否 |
| 可动画 | 否。 了解有关可动画的信息 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.justifyItems="center" 尝试一下 |
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| justify-items | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
CSS 语法
justify-items: legacy|normal|stretch|位置对齐|溢出对齐|基线对齐|initial|inherit;
属性值
| 值 | 描述 | 播放它 |
|---|---|---|
| legacy | 默认值。如果 justify-self 值为 'auto' 的网格项目仅在以 'legacy' 开头时才继承网格容器 justify-items 属性值。它存在是为了实现 HTML 的〈center〉元素和 align 属性的传统对齐行为。 | 演示 ❯ |
| normal | 取决于布局上下文，但类似于网格布局的 'stretch' | 演示 ❯ |
| stretch | 如果未设置内联大小（宽度），则会拉伸以填充网格单元。 | 演示 ❯ |
| start | 在内联方向上将项目对齐到开头 | 演示 ❯ |
| left | 将项目对齐到左侧 | 演示 ❯ |
| center | 将项目对齐到中心 | 演示 ❯ |
| end | 在内联方向上将项目对齐到末尾 | 演示 ❯ |
| right | 将项目对齐到右侧 | 演示 ❯ |
| overflow-alignment |
|
|
| 基线对齐 | 元素与父元素的基线对齐。 | 演示 ❯ |
| initial | 将此属性设置为其默认值。 了解有关initial的信息 | |
| inherit | 从其父元素继承此属性。 了解有关inherit的信息 |
更多示例
justify-items 与 justify-self
对齐方式从容器设置为 'center'，网格项目本身设置为 'right'。属性值 'right' 优先
#container {
display: grid;
justify-items: center;
}
.blue {
justify-self: right;
}
自己尝试 »
绝对定位的网格项目上的 justify-items
对齐方式在绝对定位的网格项目上设置为 'right'
#container {
display: grid;
position: relative;
justify-items: right;
}
.blue {
position: absolute;
}
自己尝试 »
writing-mode
如果网格容器元素的 writing-mode 属性值设置为 vertical-rl，则内联方向为向下。结果是容器的开头从左侧移动到顶部，容器的末尾从右侧移动到底部
#container {
justify-items: end;
writing-mode: vertical-rl;
}
自己尝试 »
direction
如果网格容器元素的 direction 属性值设置为 'rtl'，则内联方向为从右到左。结果是容器的开头从左侧移动到右侧，容器的末尾从右侧移动到左侧
#container {
justify-items: start;
direction: rtl;
}
自己尝试 »
相关页面
CSS 教程：CSS 网格
CSS 教程：CSS 定位
CSS 参考：align-items 属性
CSS 参考：direction 属性
CSS 参考：grid 属性
CSS 参考：grid-template-columns 属性
CSS 参考：justify-self 属性
CSS 参考：position 属性
CSS 参考：writing-mode 属性
