justify-items 在 flex 布局中无效，它是 grid 专属属性；flex 中垂直居中应使用 align-items，且需确保父容器为 display: flex、有明确高度、子元素未脱离文档流。
justify-items 在 Flex 布局里根本就无效
justify-items 是 Grid 布局专属属性，在 display: flex 容器中声明它，浏览器会静默忽略——DevTools 可能显示“已计算”，但 layout 引擎压根不处理。这不是兼容性问题，而是规范限制：Flex 模型没有“项目在单元格内对齐”的概念，它只有容器级的 justify-content（主轴）和 align-items（交叉轴）。
你真正想用的其实是 align-items
当目标是让子元素在垂直方向居中（比如 Flex 容器里文字或图标上下居中），该用的是 align-items，不是 justify-items。前提是：
- 父容器已设
display: flex - 容器有明确高度（
height、min-height或被内容撑开） - 子元素没脱离文档流（无
position: absolute、float、display: none） - 没被
margin: auto覆盖（它在 Flex 中会接管交叉轴对齐）
误写成 justify-items 的常见场景
这类错误多出现在从 Grid 切换到 Flex 后未清理样式，或复制代码时混淆了布局模型。典型表现：
- 写了
justify-items: center，但子元素始终贴顶/贴左 - 开发者工具里看到该属性“已应用”，但 computed 样式中
justify-items显示为auto（即未生效） - 同时写了
justify-content: center和justify-items: center，结果水平居中正常，垂直不动
Grid 和 Flex 混用时的陷阱
如果容器用了 display: grid，justify-items 才起作用；但若你本意是 Flex，却因框架类名（如 Tailwind 的 grid 类）或 CSS-in-JS 拼写错误意外触发了 Grid，则 justify-content 可能也表现异常——因为 Grid 下 justify-content 控制的是整个网格轨道的分布，而非单个子项。
验证方法：打开 DevTools，选中容器，看 computed 样式中 display 确实是 flex 还是 grid。别信 class 名，信实际渲染值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
