Lzh on GitHub

justify-self

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

快速参考

类名样式
justify-self-autojustify-self: auto;
justify-self-startjustify-self: start;
justify-self-centerjustify-self: center;
justify-self-center-safejustify-self: safe center;
justify-self-endjustify-self: end;
justify-self-end-safejustify-self: safe end;
justify-self-stretchjustify-self: stretch;
为grid布局子项目属性。

示例

自动对齐

使用 justify-self-auto 实用工具根据网格 justify-items 属性的值对齐项目：

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

起始对齐

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

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

居中对齐

使用 justify-self-center 或 justify-self-center-safe 实用工具将网格项目沿其行内轴的中心对齐：

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

justify-self-center

01
02
03

justify-self-center-safe

01
02
03
justify-self-center
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center ...">02</div>
  <!-- ... -->
</div>
justify-self-center-safe
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center-safe ...">02</div>
  <!-- ... -->
</div>

当可用空间不足时，justify-self-center-safe 实用工具会将项目对齐到容器的起始位置而不是末尾位置。

末尾对齐

使用 justify-self-end 或 justify-self-end-safe 实用工具将网格项目对齐到其行内轴的末尾位置：

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

justify-self-end

01
02
03

justify-self-end-safe

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

当可用空间不足时，justify-self-end-safe 实用工具会将项目对齐到容器的起始位置而不是末尾位置。

拉伸

使用 justify-self-stretch 实用工具拉伸网格项目以填充其行内轴上的网格区域：

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

响应式设计

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

<div class="justify-self-start md:justify-self-end ...">
  <!-- ... -->
</div>

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