自身对齐

示例

自动

使用 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 工具类将网格项目对齐到其内联轴的中心：

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

<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 工具类将网格项目对齐到其内联轴的末端：

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

<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>

响应式设计

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.