CSS justify-items 属性

定义和用法

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 属性

实例

例子 1

将每个网格项目在其网格单元的末尾沿行内方向对齐：

#container {
  display: grid;
  justify-items: end;
}

亲自试一试

例子 2：justify-items 对比 justify-self

相对于容器的对齐方式设置为“居中”，网格项目本身设置为“右对齐”。属性值 'right' 占上风：

#container {
  display: grid;
  justify-items: center;
}

.blue {
  justify-self: right;
}

亲自试一试

例子 3：在绝对定位的网格项目上设置 justify-items

设置绝对定位的网格项的对齐方式为“右对齐”：

#container {
  display: grid;
  position: relative;
  justify-items: right;
}

.blue {
  position: absolute;
}

亲自试一试

例子 4：writing-mode

当网格容器元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向为向下。结果是容器的起点从左侧移到顶部，容器的末端从右侧移到底部：

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

亲自试一试

例子 5：direction

网格容器元素的 direction 属性值设置为“rtl”时，行内方向是从右到左。结果是容器的起点从左侧移到右侧，容器的末端从右侧移到左侧：

#container {
  justify-items: start;
  direction: rtl;
}

亲自试一试

CSS 语法

justify-items: legacy|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;

属性值

技术细节

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。