justify-self

示例

自动对齐

使用 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.