justify-self

justify-self

用於控制單個網格項目如何沿其內嵌軸對齊的工具類別。

類別樣式

justify-self-auto

justify-self: auto;

justify-self-start

justify-self: start;

justify-self-end

justify-self: end;

justify-self-center

justify-self: center;

justify-self-stretch

justify-self: stretch;

範例

使用 justify-self-auto 根據網格的 justify-items 屬性值對齊項目

<div class="grid justify-items-stretch ...">  <!-- ... -->  <div class="justify-self-auto ...">02</div>  <!-- ... --></div>

使用 justify-self-start 將網格項目對齊到其內嵌軸的起點

<div class="grid justify-items-stretch ...">  <!-- ... -->  <div class="justify-self-start ...">02</div>  <!-- ... --></div>

使用 justify-self-center 將網格項目沿其內嵌軸的中心對齊

<div class="grid justify-items-stretch ...">  <!-- ... -->  <div class="justify-self-center ...">02</div>  <!-- ... --></div>

使用 justify-self-end 將網格項目對齊到其內嵌軸的末端

<div class="grid justify-items-stretch ...">  <!-- ... -->  <div class="justify-self-end ...">02</div>  <!-- ... --></div>

使用 justify-self-stretch 延展網格項目以填滿其內嵌軸上的網格區域

<div class="grid justify-items-start ...">  <!-- ... -->  <div class="justify-self-stretch ...">02</div>  <!-- ... --></div>

前綴a justify-self 工具類別使用像 md: 這樣的斷點變體，僅在中型螢幕尺寸及以上時套用工具類別

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

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