justify-items

用于控制 grid 项目沿其行轴如何对齐的工具类。

快速参考

类	属性
justify-items-start	justify-items: start;
justify-items-end	justify-items: end;
justify-items-end-safe	justify-items: safe end;
justify-items-center	justify-items: center;
justify-items-center-safe	justify-items: safe center;
justify-items-stretch	justify-items: stretch;
justify-items-normal	justify-items: normal;

示例

起点

使用 justify-items-start 工具类，将 grid 项目对齐到其行轴的起点：

01

02

03

04

05

06

<!-- [!code classes:justify-items-start] -->
<div class="grid justify-items-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

终点

使用 justify-items-end 或 justify-items-end-safe 工具类，将 grid 项目对齐到其行轴的终点：

justify-items-end

01

02

03

justify-items-end-safe

01

02

03

justify-items-end

<!-- [!code classes:justify-items-end] -->
<div class="grid grid-flow-col justify-items-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

justify-items-end-safe

<!-- [!code classes:justify-items-end-safe] -->
<div class="grid grid-flow-col justify-items-end-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

当可用空间不足时，justify-items-end-safe 工具类会将项目对齐到容器起点，而不是终点。

居中

使用 justify-items-center 或 justify-items-center-safe 工具类，将 grid 项目沿其行轴居中对齐：

justify-items-center

01

02

03

justify-items-center-safe

01

02

03

justify-items-center

<!-- [!code classes:justify-items-center] -->
<div class="grid grid-flow-col justify-items-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

justify-items-center-safe

<!-- [!code classes:justify-items-center-safe] -->
<div class="grid grid-flow-col justify-items-center-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

当可用空间不足时，justify-items-center-safe 工具类会将项目对齐到容器起点，而不是居中。

拉伸

使用 justify-items-stretch 工具类，沿行轴拉伸项目：

01

02

03

04

05

06

<!-- [!code classes:justify-items-stretch] -->
<div class="grid justify-items-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

响应式设计

使用 md: 等断点变体作为 justify-items 工具类的前缀，即可只在中等屏幕尺寸及以上生效：

<div class="grid justify-items-start md:justify-items-center ...">
 <!-- ... -->
</div>

在变体文档中了解有关使用变体的更多信息。