justify-items 主轴对齐属性

最后更新：2026-09-13

justify-items justify-items 主轴对齐属性

justify-items 属性用于设置容器内所有项目在主轴（行内轴）方向上的默认对齐方式，主要应用于网格布局（Grid），在弹性布局中不产生效果。它类似于弹性布局中的 justify-content，但作用对象是容器内的每个项目而非项目整体。默认值为 stretch，项目会被拉伸填满单元格。

分类
初始值	legacy
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

justify-items: normal | stretch | start | end | self-start | self-end | center | left | right | baseline | legacy;

⚙️ 取值

值	类型	描述
`normal \| stretch \| start \| end \| center \| left \| right \| legacy`	关键字	弹性/网格项目主轴对齐

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
justify-items	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
所有主流浏览器均支持

注意： justify-items 在弹性布局（Flexbox）中不生效，仅适用于网格布局（Grid）。弹性布局中应使用 justify-content 控制项目对齐。

提示： justify-items 的 legacy 值用于兼容旧版浏览器，配合 justify-self: legacy 使用。新项目建议避免使用 legacy 值。

❓ 常见问题

Qjustify-items 和 justify-content 有什么区别？

Ajustify-items 作用于每个网格项，控制项目在自身单元格内沿行内轴（水平方向）的对齐方式；justify-content 作用于整个网格内容区，控制所有轨道在容器内的分布。两者层面不同可同时使用：justify-content 分配容器剩余空间，justify-items 控制每个单元格内项目的对齐。

Qjustify-items 在弹性布局中为什么不生效？

A弹性布局没有单元格概念，项目直接排列在容器中，因此 justify-items 没有应用对象。弹性布局中主轴分布用 justify-content，交叉轴对齐用 align-items。justify-items 及其单项版 justify-self 主要服务于 Grid 布局。

Qgrid 中如何让每个单元格的内容水平居中？

A两种方式：容器上写 justify-items: center，让所有网格项在单元格内水平居中；或给单个网格项写 justify-self: center。别写成 justify-content: center，它控制整个网格内容区在容器中的位置。想同时垂直居中可用 place-items: center。