Kituo cha 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;
}

亲自试一试

Mfano 3: Kuzingatia justify-items kwenye kifungo cha kijani cha kuzingatia mazingira

Makadirio wa kifungo cha kijani cha kuzingatia mazingira inasaidia kuwa kwenye mazingira ya kima na kuzingatia eneo la kwanza kwenye eneo la kima:

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

亲自试一试

Mfano 4: writing-mode

Makini ya elementi ya kifungo cha kijani kwa tabaka cha writing-mode hivyo value ya vertical-rl, jumla ya siku inaonekana kuelekea chini. Matokeo huo ni kwamba chanzo cha kifungo chakaa katika eneo la kwanza kwenye ukanda wa kima na kikamilifu cha kifungo chakaa katika eneo la kwanza kwenye chini:

#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;

属性值

值 描述
legacy

默认值。

仅在以'legacy'开头时，justify-self 值为'auto'的网格项继承网格容器的 justify-items 属性值。

它的存在是为了实现 HTML 的 <center> 元素和 align 属性的遗留对齐行为。
normal 取决于布局上下文，但类似于网格布局的 'stretch'。
stretch 如果未设置 inline-size（宽度），则拉伸以填充网格单元格。
start 在行内方向开头对齐项目。
left 将项目左对齐。
center 将项目对齐到中心。
end 在行内方向的末尾对齐项目。
right 将项目右对齐。
overflow-alignment
  • 'safe' 会将项目的对齐方式设置为 'start'，如果内容溢出。
  • 'unsafe' 保持对齐值，无论项目内容是否溢出。
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