项目对齐

示例

起始对齐

使用 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 或 justify-items-end-safe 工具类将网格项目对齐到其内联轴的末端：

<div class="grid grid-flow-col justify-items-end ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

<div class="grid grid-flow-col justify-items-end-safe ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

当没有足够的可用空间时，justify-items-end-safe 工具类会将项目对齐到容器的起始位置而不是末端。

居中对齐

使用 justify-items-center 或 justify-items-center-safe 工具类将网格项目对齐到其内联轴的中心：

<div class="grid grid-flow-col justify-items-center ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

<div class="grid grid-flow-col justify-items-center-safe ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

当没有足够的可用空间时，justify-items-center-safe 工具类会将项目对齐到容器的起始位置而不是中心。

拉伸对齐

使用 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.