Flexbox & Grid
place-self
用於控制單個項目在同時對齊和對齊方式的實用程式。
| 類別 | 樣式 |
|---|---|
place-self-auto | place-self: auto; |
place-self-start | place-self: start; |
place-self-end | place-self: end; |
place-self-center | place-self: center; |
place-self-stretch | place-self: stretch; |
範例
自動
使用 place-self-auto 根據容器的 place-items 屬性值對齊項目
01
02
03
04
05
06
<div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-auto ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>開始
使用 place-self-start 將項目在兩個軸上對齊至起點
01
02
03
04
05
06
<div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-start ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>置中
使用 place-self-center 將項目在兩個軸上置中對齊
01
02
03
04
05
06
<div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-center ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>結束
使用 place-self-end 將項目在兩個軸上對齊至終點
01
02
03
04
05
06
<div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-end ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>延展
使用 place-self-stretch 將項目在兩個軸上延展
01
02
03
04
05
06
<div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-stretch ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>響應式設計
前綴a place-self 實用程式 使用斷點變體 (例如 md:) 只在中等 螢幕尺寸及以上套用實用程式
<div class="place-self-start md:place-self-end ..."> <!-- ... --></div>請參閱變體文件以瞭解更多關於使用變體的資訊。
