Align Self 自我对齐
用于控制单个弹性或网格项沿其容器的交叉轴定位的实用程序。
| Class | Properties |
|---|
基本用法
Auto 自动
使用 self-auto 根据容器的 align-items 属性的值来对齐项目：
01
02
03
html
<div class="flex items-stretch ...">
<div>01</div>
<div class="self-auto ...">02</div>
<div>03</div>
</div>Start 开始
使用 self-start 将项目与容器的交叉轴起始位置对齐，而不考虑容器的 align-items 值：
01
02
03
html
<div class="flex items-stretch ...">
<div>01</div>
<div class="self-start ...">02</div>
<div>03</div>
</div>Center 居中
使用 self-center 将项目沿着容器的交叉轴居中对齐，而不考虑容器的 align-items 值：
01
02
03
html
<div class="flex items-stretch ...">
<div>01</div>
<div class="self-center ...">02</div>
<div>03</div>
</div>End 末尾
使用 self-end 将项目与容器的交叉轴末端对齐，而不考虑容器的 align-items 值：
01
02
03
html
<div class="flex items-stretch ...">
<div>01</div>
<div class="self-end ...">02</div>
<div>03</div>
</div>Stretch 伸展
使用 self-stretch 来拉伸项目以填充容器的交叉轴，而不考虑容器的 align-items 值：
01
02
03
html
<div class="flex items-stretch ...">
<div>01</div>
<div class="self-stretch ...">02</div>
<div>03</div>
</div>有条件地应用
悬停，焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:self-end 只在悬停时应用 self-end 实用程序。
html
<div class="self-auto hover:self-end">
<!-- ... -->
</div>要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:self-end 仅在中等屏幕尺寸及以上应用 self-end 实用程序。
html
<div class="self-auto md:self-end">
<!-- ... -->
</div>