1. Flexbox & Grid
  2. justify-items

Flexbox & Grid

justify-items

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

样式
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 将网格项目与其内联轴的起点对齐

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 将网格项目与其内联轴的末尾对齐

01
02
03
04
05
06
<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 将网格项目沿其内联轴居中对齐

01
02
03
04
05
06
<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 拉伸项目沿其内联轴

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>

响应式设计

前缀a justify-items 实用工具 带有像 md: 这样的断点变体,以便仅在中等 屏幕尺寸及以上应用此实用工具

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

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策