CSS justify-items 属性

Definition and Usage

Ang justify-items property ay naka-set sa container ng grid, upang ang mga anak (ang item ng grid) ay alinlang sa direksyon ng inline.

Para sa pahina na may Ingles, ang direksyon ng inline ay mula sa kaliwa papunta sa kanan, ang direksyon ng block ay mula itaas papunta sa ilalim.

Kung gusto mong magkaroon ng anumang epekto ng alining, ang item ng grid ay dapat may makukuhang espasyo sa paligid ng kanyang sarili sa direksyon ng inline.

Tip:Kung gusto mong alinlang ang item ng grid sa direksyon ng block sa halip ng direksyon ng inline, gamitin ang: align-items property Properties.

Bilang karagdagan:

CSS Tutorial:CSS Grid

CSS Tutorial:CSS Positioning

CSS Reference Manual:align-items property

CSS Reference Manual:direction property

CSS Reference Manual:grid property

CSS Reference Manual:grid-template-columns property

CSS Reference Manual:justify-self property

CSS Reference Manual:position property

CSS Reference Manual:writing-mode property

Mga halimbawa

Halimbawa 1

I-alinlang ang bawat item ng grid sa dulo ng kanilang cell sa direksyon ng inline:

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

亲自试一试

Halimbawa 2: Paghahambing ng justify-items at justify-self

Itakda ang paraan ng alining ng container bilang 'center', at ang item ng grid bilang 'right-align'. Ang halaga ng 'right' ang nananalo:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

亲自试一试

Halimbawa 3: I-set ang justify-items sa item na may absolute na lokasyon

Itakda ang paraan ng alining ng item na may absolute na lokasyon bilang 'right-align':

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

亲自试一试

Halimbawa 4: writing-mode

Kapag ang writing-mode ng elemento ng container ng grid ay naka-set sa vertical-rl, ang direksyon ng inline ay papuntangibaba. Ang resulta ay ang punto ng simula ng container ay inilipat mula sa kaliwa papunta sa itaas, ang dulo ng container ay inilipat mula sa kanan papunta sa ilalim:

#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