- Flexbox & Grid
- align-self
Flexbox & Grid
align-self
用於控制單一 flex 或 grid 項目如何沿容器交叉軸定位的通用類別。
| Class | Styles |
|---|---|
self-auto | align-self: auto; |
self-start | align-self: flex-start; |
self-end | align-self: flex-end; |
self-end-safe | align-self: safe flex-end; |
self-center | align-self: center; |
self-center-safe | align-self: safe center; |
self-stretch | align-self: stretch; |
self-baseline | align-self: baseline; |
self-baseline-last | align-self: last baseline; |
範例（Examples）
自動（Auto）
使用 self-auto 通用類別根據容器的 align-items 屬性值對齊項目：
01
02
03
<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
<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
<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
<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
<div class="flex items-stretch ..."> <div>01</div> <div class="self-stretch ...">02</div> <div>03</div></div>基線（Baseline）
使用 self-baseline 通用類別對齊項目，使其基線與 flex 容器交叉軸的基線對齊：
01
02
03
<div class="flex ..."> <div class="self-baseline pt-2 pb-6">01</div> <div class="self-baseline pt-8 pb-12">02</div> <div class="self-baseline pt-12 pb-4">03</div></div>最後基線（Last baseline）
使用 self-baseline-last 通用類別沿容器的交叉軸對齊項目，使其基線與容器中的最後基線對齊：
<div class="grid grid-cols-[1fr_auto]"> <div> <img src="img/spencer-sharp.jpg" /> <h4>Spencer Sharp</h4> <p class="self-baseline-last">Working on the future of astronaut recruitment at Space Recruit.</p> </div> <p class="self-baseline-last">spacerecruit.com</p></div>這對於確保文字項目彼此對齊很有用，即使它們有不同的高度。
響應式設計（Responsive design）
在 align-self 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="self-auto md:self-end ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。