place-self

用于同时控制单个项目如何对齐和排列的工具类。

快速参考

类	属性
place-self-auto	place-self: auto;
place-self-start	place-self: start;
place-self-end	place-self: end;
place-self-end-safe	place-self: safe end;
place-self-center	place-self: center;
place-self-center-safe	place-self: safe center;
place-self-stretch	place-self: stretch;

示例

Auto

使用 place-self-auto 根据容器的 place-items 属性值对齐项目：

01

02

03

04

05

06

<!-- [!code classes:place-self-auto] -->
<div class="grid grid-cols-3 gap-4 ...">
  <div>01</div>
  <div class="place-self-auto ...">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

起点

使用 place-self-start 将项目在两个轴上对齐到起点：

01

02

03

04

05

06

<!-- [!code classes:place-self-start] -->
<div class="grid grid-cols-3 gap-4 ...">
  <div>01</div>
  <div class="place-self-start ...">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

居中

使用 place-self-center 将项目在两个轴上居中对齐：

01

02

03

04

05

06

<!-- [!code classes:place-self-center] -->
<div class="grid grid-cols-3 gap-4 ...">
  <div>01</div>
  <div class="place-self-center ...">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

终点

使用 place-self-end 将项目在两个轴上对齐到终点：

01

02

03

04

05

06

<!-- [!code classes:place-self-end] -->
<div class="grid grid-cols-3 gap-4 ...">
  <div>01</div>
  <div class="place-self-end ...">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

拉伸

使用 place-self-stretch 在两个轴上拉伸项目：

01

02

03

04

05

06

<!-- [!code classes:place-self-stretch] -->
<div class="grid grid-cols-3 gap-4 ...">
  <div>01</div>
  <div class="place-self-stretch ...">02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

响应式设计

使用 md: 等断点变体作为 place-self 工具类的前缀，即可只在中等屏幕尺寸及以上生效：

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

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