- Flexbox & Grid
- align-items
Flexbox & Grid
align-items
用於控制 flex 和 grid 項目如何沿容器交叉軸定位的通用類別。
| Class | Styles |
|---|---|
items-start | align-items: flex-start; |
items-end | align-items: flex-end; |
items-end-safe | align-items: safe flex-end; |
items-center | align-items: center; |
items-center-safe | align-items: safe center; |
items-baseline | align-items: baseline; |
items-baseline-last | align-items: last baseline; |
items-stretch | align-items: stretch; |
範例（Examples）
伸展（Stretch）
使用 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>起點（Start）
使用 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>置中（Center）
使用 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>終點（End）
使用 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>基線（Baseline）
使用 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>最後基線（Last baseline）
使用 items-baseline-last 通用類別沿容器交叉軸對齊項目，使所有基線與容器中的最後基線對齊：
Spencer Sharp
Working on the future of astronaut recruitment at Space Recruit.
Alex Reed
A multidisciplinary designer.
<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>這對於確保文字項目彼此對齊很有用，即使它們有不同的高度。
響應式設計（Responsive design）
在 align-items 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="flex items-stretch md:items-center ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。