align-items

align-items

用於控制彈性盒和網格項目沿著容器交叉軸的定位方式的實用程式。

類別樣式

items-start

align-items: flex-start;

items-end

align-items: flex-end;

items-center

align-items: center;

items-baseline

align-items: baseline;

items-stretch

align-items: stretch;

範例

使用 items-stretch 來延展項目以填滿容器的交叉軸

<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 來將項目對齊容器交叉軸的起點

<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 來將項目對齊容器交叉軸的中心

<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 來將項目對齊容器交叉軸的終點

<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 來將項目沿容器的交叉軸對齊，使它們的基準線對齊

<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>

前綴將 align-items 實用程式與中斷點變體（如 md:）一起使用，僅在中等螢幕尺寸及以上時套用實用程式

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

在變體文件中深入了解如何使用變體。