Align Items 对齐项目
用于控制弹性布局和网格项目沿容器交叉轴定位的实用工具。
| Class | Properties |
|---|
基本用法
Stretch 伸展
使用 items-stretch 来拉伸项目以填充容器的交叉轴：
01
02
03
html
<div class="flex items-stretch ...">
<div class="py-4">01</div>
<div class="py-12">02</div>
<div class="py-8">03</div>
</div>Start 开始
使用 items-start 来将项目对齐到容器的交叉轴的起始位置：
01
02
03
html
<div class="flex items-start ...">
<div class="py-4">01</div>
<div class="py-12">02</div>
<div class="py-8">03</div>
</div>Center 居中
使用 items-center 来将项目沿着容器的交叉轴居中对齐：
01
02
03
html
<div class="flex items-center ...">
<div class="py-4">01</div>
<div class="py-12">02</div>
<div class="py-8">03</div>
</div>End 末尾
使用 items-end 将项目对齐到容器的交叉轴的末尾：
01
02
03
html
<div class="flex items-end ...">
<div class="py-4">01</div>
<div class="py-12">02</div>
<div class="py-8">03</div>
</div>Baseline 基线
使用 items-baseline 来沿着容器的交叉轴对齐项目，使它们的基线都对齐：
01
02
03
html
<div class="flex items-baseline ...">
<div class="pt-2 pb-6">01</div>
<div class="pt-8 pb-12">02</div>
<div class="pt-12 pb-4">03</div>
</div>有条件地应用
悬停，焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:items-center 只在悬停时应用 items-center 实用程序。
html
<div class="flex items-stretch hover:items-center">
<!-- ... -->
</div>要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:items-center 仅在中等屏幕尺寸及以上应用 items-center 实用程序。
html
<div class="flex items-stretch md:items-center">
<!-- ... -->
</div>