justify-self 单个项目主轴对齐属性

最后更新：2026-09-13

justify-self justify-self 单个项目主轴对齐属性

justify-self 属性用于设置单个项目在主轴（行内轴）方向上的对齐方式，覆盖容器 justify-items 的默认设置。它主要应用于网格布局（Grid），在弹性布局中不产生效果。通过该属性，可以让某个项目在单元格内独立对齐，而不影响其他项目的对齐方式。

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

📝 语法

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

⚙️ 取值

值	类型	描述
`auto \| normal \| stretch \| start \| end \| center \| left \| right`	关键字	单个项目主轴对齐

▶ 示例

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

▶ 试一试

🌐 浏览器支持

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

注意： justify-self 在弹性布局（Flexbox）中不生效，仅适用于网格布局（Grid）。弹性布局中应使用 align-self 控制单个项目的交叉轴对齐。

提示： justify-self: auto 表示继承容器的 justify-items 设置；justify-self: normal 的效果等同于 stretch。

❓ 常见问题

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

Ajustify-items 设置在网格容器上，统一指定所有网格项的默认水平对齐；justify-self 设置在单个网格项上，覆盖该项目的默认值。justify-self 的优先级高于 justify-items，适合让个别项目在单元格内特殊对齐而其他项目保持不变。

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

A弹性布局没有单元格概念，项目直接排列在容器中，justify-self 没有应用对象。弹性布局中单个项目的对齐通常用 margin: auto 或嵌套弹性容器实现，例如 justify-content: space-between 配合 margin-left: auto 让某项右移。

Qjustify-self: center 和 margin: auto 有什么区别？

Ajustify-self: center 是 Box Alignment 规范提供的对齐，把网格项在单元格内水平居中；margin: auto 的 auto 外边距吸收剩余空间同样能居中，两者视觉一致。justify-self 语义更清晰，还支持 start、end、stretch 等取值，网格布局中推荐使用。