justify-self 在 Flex 容器中完全无效，因其未被 Flexbox 规范定义，浏览器直接忽略；它仅适用于 Grid 布局，用于控制网格项在其单元格内的行内轴对齐。
justify-self 在 Flex 容器中根本不起作用
justify-self 是 Grid 布局的属性，Flex 容器不识别它。在 Flex 中给子项写 justify-self: start 或任何值，浏览器会直接忽略——DevTools 里甚至不会显示为“已计算”，更不会影响布局。这不是兼容性问题，是规范层面的不支持（Flexbox Level 1 规范未定义该属性）。
为什么有人误以为 justify-self 能用
常见混淆来源有两个：
一是把 Grid 的写法复制到 Flex 容器中，比如看到 grid-item { justify-self: start; } 就顺手套用；
二是某些 CSS 预处理器或 IDE 自动补全误导，把 Grid 属性建议给了 Flex 上下文。
实测验证：在任意现代浏览器（Chrome 125+、Firefox 124+、Safari 17.5+）中，对 Flex 子项设置 justify-self 后检查 computed styles，该属性始终缺失。
真正能控制最后一行对齐的 Flex 方案
-
justify-content: flex-start是默认行为，但只对单行生效；多行时它不改变最后一行内部的分布逻辑 - 伪元素占位法：给容器加
::after，设content: ""+flex: 0 0 100%+margin-left: auto，靠挤出空间迫使真实子项左贴边 - 放弃
space-between，改用margin手动控距：每个子项设右/下边距，容器用负margin抵消边缘多余间隙 - 直接切到 Grid：用
display: grid+grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))，天然左对齐最后一行，无补位陷阱
容易被忽略的细节
伪元素方案必须显式声明 display: block 或 display: flex，否则 iOS Safari 16.4 及更早版本中 width: 100% 失效；Grid 方案虽干净，但在需要支持 IE11 或旧版 Android WebView 的项目里仍需 JS 回退。真正难的不是选哪种，而是确认你的响应式断点是否会让列数动态变化——一旦列数不固定，纯 CSS 补位就不可靠，这时候 JS 动态插入占位节点反而更可控。
立即学习“前端免费学习笔记（深入）”；
