Lzh on GitHub

justify-items

控制网格项目在其行内轴上的对齐方式的实用工具。

快速参考

类名样式
justify-items-startjustify-items: start;
justify-items-endjustify-items: end;
justify-items-end-safejustify-items: safe end;
justify-items-centerjustify-items: center;
justify-items-center-safejustify-items: safe center;
justify-items-stretchjustify-items: stretch;
justify-items-normaljustify-items: normal;
为grid布局父容器属性。

示例

起始对齐

使用 justify-items-start 实用工具将网格项目对齐到其行内轴的起始位置：

01
02
03
04
05
06 
<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

01
02
03

justify-items-end-safe

01
02
03
<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 实用工具将网格项目对齐到其行内轴的中心位置：

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

justify-items-center

01
02
03

justify-items-center-safe

01
02
03
<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 实用工具沿其行内轴拉伸项目：

01
02
03
04
05
06
<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>

响应式设计

使用断点变体（例如 md:）作为 justify-items 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

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

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