justify-items

justify-items

用于控制网格项目如何沿其内联轴对齐的实用工具。

类样式

justify-items-start

justify-items: start;

justify-items-end

justify-items: end;

justify-items-end-safe

justify-items: safe end;

justify-items-center

justify-items: center;

justify-items-center-safe

justify-items: safe 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 或 justify-items-end-safe 实用程序将网格项目在其内联轴的末尾对齐

调整容器大小以查看对齐行为

justify-items-end

justify-items-end-safe

justify-items-end

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

justify-items-end-safe

<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 实用程序将网格项目在其内联轴的末尾对齐

调整容器大小以查看对齐行为

justify-items-center

justify-items-center-safe

justify-items-center

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

justify-items-center-safe

<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>

前缀一个 justify-items 实用程序使用断点变体（如 md:）仅在以下情况下应用该实用程序中等屏幕尺寸及以上

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

在变体文档中了解有关使用变体的更多信息。