justify-self

justify-self

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

类名样式

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;

示例

使用 justify-self-auto 工具类基于网格 justify-items 属性的值来对齐项目

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-auto ...">02</div>
  <!-- ... -->
</div>

使用 justify-self-start 工具类将网格项目对齐到其行内轴线的起点

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-start ...">02</div>
  <!-- ... -->
</div>

使用 justify-self-center 或 justify-self-center-safe 工具类将网格项目沿其行内轴线的中心对齐

调整容器大小以查看对齐行为

justify-center-end

justify-self-center-safe

justify-self-center

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center ...">02</div>
  <!-- ... -->
</div>

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 工具类将网格项目对齐到其行内轴线的终点

调整容器大小以查看对齐行为

justify-self-end

justify-self-end-safe

justify-self-end

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end ...">02</div>
  <!-- ... -->
</div>

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 工具类拉伸网格项目以填充其行内轴线上的网格区域

<div class="grid justify-items-start ...">
  <!-- ... -->
  <div class="justify-self-stretch ...">02</div>
  <!-- ... -->
</div>

前缀a justify-self 工具类使用断点变体，例如 md:，以仅在中等及以上屏幕尺寸应用该工具类

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

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