justify-items

用于控制网格项目如何沿其内联轴对齐的功能类。

Class Styles

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>

Prefix a justify-items utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.