align-self

align-self

用於控制個別彈性或網格項目如何沿其容器的交叉軸定位的公用程式。

類別樣式

self-auto

align-self: auto;

self-start

align-self: flex-start;

self-end

align-self: flex-end;

self-center

align-self: center;

self-stretch

align-self: stretch;

self-baseline

align-self: baseline;

範例

使用 self-auto 根據容器的 align-items 屬性的值來對齊項目

<div class="flex items-stretch ...">  <div>01</div>  <div class="self-auto ...">02</div>  <div>03</div></div>

使用 self-start 將項目對齊到容器交叉軸的起點，而不考慮容器的 align-items 值

<div class="flex items-stretch ...">  <div>01</div>  <div class="self-start ...">02</div>  <div>03</div></div>

使用 self-center 將項目對齊到容器交叉軸的中心，而不考慮容器的 align-items 值

<div class="flex items-stretch ...">  <div>01</div>  <div class="self-center ...">02</div>  <div>03</div></div>

使用 self-end 將項目對齊到容器交叉軸的終點，而不考慮容器的 align-items 值

<div class="flex items-stretch ...">  <div>01</div>  <div class="self-end ...">02</div>  <div>03</div></div>

使用 self-stretch 將項目延伸以填滿容器的交叉軸，而不考慮容器的 align-items 值

<div class="flex items-stretch ...">  <div>01</div>  <div class="self-stretch ...">02</div>  <div>03</div></div>

前綴將 align-self 公用程式與像 md: 這樣的斷點變體結合使用，只在中型螢幕尺寸及以上套用公用程式

<div class="self-auto md:self-end ...">  <!-- ... --></div>

在變體文件中了解更多關於使用變體的資訊。