justify-items

justify-items

用於控制網格項目如何沿其內嵌軸對齊的實用程式。

類別樣式

justify-items-start

justify-items: start;

justify-items-end

justify-items: end;

justify-items-center

justify-items: center;

justify-items-stretch

justify-items: stretch;

justify-items-normal

justify-items: normal;

範例

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

<div class="grid justify-items-start ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>

使用 justify-items-end 將網格項目對齊其內嵌軸的終點

<div class="grid justify-items-end ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>

使用 justify-items-center 將網格項目沿其內嵌軸置中對齊

<div class="grid justify-items-center ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>

使用 justify-items-stretch 沿其內嵌軸延展項目

<div class="grid justify-items-stretch ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div>  <div>05</div>  <div>06</div></div>

前綴a justify-items 實用程式使用像 md: 這樣的斷點變體，僅在以下情況下套用該實用程式中螢幕尺寸及以上

<div class="grid justify-items-start md:justify-items-center ...">  <!-- ... --></div>

請參閱變體文件以深入了解如何使用變體。