Lzh on GitHub

align-items

控制弹性盒子和网格项目在其容器交叉轴上的对齐方式的实用工具。

快速参考

类名样式
items-startalign-items: flex-start;
items-endalign-items: flex-end;
items-end-safealign-items: safe flex-end;
items-centeralign-items: center;
items-center-safealign-items: safe center;
items-baselinealign-items: baseline;
items-baseline-lastalign-items: last baseline;
items-stretchalign-items: stretch;
为flex/grid布局父容器属性。

示例

拉伸

使用 items-stretch 实用工具拉伸项目以填充容器的交叉轴：

01
02
03
<div class="flex items-stretch ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>

起始对齐

使用 items-start 实用工具将项目对齐到容器交叉轴的起始位置：

01
02
03
<div class="flex items-start ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>

居中对齐

使用 items-center 实用工具将项目沿容器的交叉轴居中对齐：

01
02
03
<div class="flex items-center ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>

末尾对齐

使用 items-end 实用工具将项目对齐到容器交叉轴的末尾位置：

01
02
03
<div class="flex items-end ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>

基线对齐

使用 items-baseline 实用工具将项目沿容器的交叉轴对齐，使它们的所有基线都对齐：

01
02
03
<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>

最后一个基线对齐

使用 items-baseline-last 实用工具将项目沿容器的交叉轴对齐，使它们的所有基线都与容器中的最后一个基线对齐：

Spencer Sharp

Working on the future of astronaut recruitment at Space Recruit.

spacerecruit.com
Alex Reed

A multidisciplinary designer.

alex-reed.com 
<div class="grid grid-cols-[1fr_auto] items-baseline-last">
  <div>
    <img src="img/spencer-sharp.jpg" />
    <h4>Spencer Sharp</h4>
    <p>Working on the future of astronaut recruitment at Space Recruit.</p>
  </div>
  <p>spacerecruit.com</p>
</div>

这对于确保文本项即使在高度不同的情况下也能相互对齐非常有用。

响应式设计

使用断点变体（例如 md:）作为 align-items 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

<div class="flex items-stretch md:items-center ...">
  <!-- ... -->
</div>

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