1. Flexbox & Grid
  2. justify-self

Flexbox & Grid

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;

示例

Auto

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

01
02
03
04
05
06
<div class="grid justify-items-stretch ...">
<!-- ... -->
<div class="justify-self-auto ...">02</div>
<!-- ... -->
</div>

Start

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

01
02
03
04
05
06
<div class="grid justify-items-stretch ...">
<!-- ... -->
<div class="justify-self-start ...">02</div>
<!-- ... -->
</div>

Center

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

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

justify-center-end

01
02
03

justify-self-center-safe

01
02
03
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 工具类会将项目对齐到容器的起点而不是终点。

End

使用 justify-self-endjustify-self-end-safe 工具类将网格项目对齐到其行内轴线的终点

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

justify-self-end

01
02
03

justify-self-end-safe

01
02
03
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 工具类会将项目对齐到容器的起点而不是终点。

Stretch

使用 justify-self-stretch 工具类拉伸网格项目以填充其行内轴线上的网格区域

01
02
03
04
05
06
<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>

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策