justify-self

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

快速参考

类	属性
justify-self-auto	justify-self: auto;
justify-self-start	justify-self: start;
justify-self-center	justify-self: center;
justify-self-center-safe	justify-self: safe center;
justify-self-end	justify-self: end;
justify-self-end-safe	justify-self: safe end;
justify-self-stretch	justify-self: stretch;

示例

Auto

使用 justify-self-auto 工具类，根据网格的 justify-items 属性值对齐项目：

01

02

03

04

05

06

<!-- [!code classes:justify-self-auto] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-auto ...">02</div>
  <!-- ... -->
</div>

起点

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

01

02

03

04

05

06

<!-- [!code classes:justify-self-start] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-start ...">02</div>
  <!-- ... -->
</div>

居中

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

justify-self-center

01

02

03

justify-self-center-safe

01

02

03

justify-self-center

<!-- [!code classes:justify-self-center] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center ...">02</div>
  <!-- ... -->
</div>

justify-self-center-safe

<!-- [!code classes:justify-self-center-safe] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center-safe ...">02</div>
  <!-- ... -->
</div>

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

终点

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

justify-self-end

01

02

03

justify-self-end-safe

01

02

03

justify-self-end

<!-- [!code classes:justify-self-end] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end ...">02</div>
  <!-- ... -->
</div>

justify-self-end-safe

<!-- [!code classes:justify-self-end-safe] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end-safe ...">02</div>
  <!-- ... -->
</div>

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

拉伸

使用 justify-self-stretch 工具类，沿行轴拉伸 grid 项目以填满网格区域：

01

02

03

04

05

06

<!-- [!code classes:justify-self-stretch] -->
<div class="grid justify-items-start ...">
  <!-- ... -->
  <div class="justify-self-stretch ...">02</div>
  <!-- ... -->
</div>

响应式设计

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

<div class="justify-self-start md:justify-self-end ...">
 <!-- ... -->
</div>

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