CSS justify-items 属性
更多“自己尝试”的例子见下文。
定义和用法
justify-items
属性设置在网格容器上,用于为子元素(网格项)在行内方向上提供对齐。
对于英文页面,行内方向是从左到右,块方向是从上到下。
为了使此属性产生任何对齐效果,网格项需要在行内方向上有可用的空间。
提示: 要在块方向而不是行内方向上对齐网格项,请使用 align-items
属性。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
属性 | |||||
---|---|---|---|---|---|
justify-items | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
CSS 语法
justify-items: legacy|normal|stretch|位置对齐|溢出对齐|基线对齐|initial|inherit;
属性值
值 | 描述 | 试一试 |
---|---|---|
旧版 | 默认值。 具有 justify-self 值为 'auto' 的网格项仅继承网格容器的 justify-items 属性值,如果该值以 'legacy' 开头。它用于实现 HTML 〈center〉 元素和 align 属性的旧版对齐行为。 | 演示 ❯ |
normal | 取决于布局上下文,但对于网格布局,类似于 'stretch' | 演示 ❯ |
stretch | 如果未设置 inline-size(宽度),则拉伸以填充网格单元。 | 演示 ❯ |
start | 在行内方向上将项对齐到开头 | 演示 ❯ |
left | 将项对齐到左侧 | 演示 ❯ |
center | 将项对齐到中心 | 演示 ❯ |
end | 在行内方向上将项对齐到末尾 | 演示 ❯ |
right | 将项对齐到右侧 | 演示 ❯ |
overflow-alignment |
|
|
baseline 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 Grid
CSS 教程: CSS 定位
CSS 参考: align-items 属性
CSS 参考: direction 属性
CSS 参考: grid 属性
CSS 参考: grid-template-columns 属性
CSS 参考: justify-self 属性
CSS 参考: position 属性
CSS 参考: writing-mode 属性