justify-self

justify-self

用于控制单个网格项目在其内联轴上对齐的工具。

Class Styles

justify-self-auto

justify-self: auto;

justify-self-start

justify-self: start;

justify-self-end

justify-self: end;

justify-self-center

justify-self: center;

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 在其内联轴上将网格项目对齐到中心：

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

使用 justify-self-end 将网格项目对齐到其内联轴的结束位置：

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

使用 justify-self-stretch 将网格项目拉伸以填充其内联轴上的网格区域：

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

Prefix a justify-self utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.