justify-self 在 Flex 布局中不被解析，浏览器直接忽略；Flex 无主轴单项目对齐属性，应改用 margin: auto 或切换为 Grid 布局。
justify-self 在 Flex 容器里根本不会解析
浏览器遇到 justify-self 写在 display: flex 的子元素上时，会直接忽略该声明——它不在 Flex 规范里，不是“不生效”，而是压根不认。你改写成 justify-self: center 或 justify-self: end，computed styles 里都看不到这个属性，devtools 甚至可能连警告都不报。
常见错误现象包括：
- 父容器是
display: flex，子项加了justify-self: center，但文字/按钮始终靠左 - 误以为
justify-self是align-self的“水平版”，试图用它控制主轴单个元素位置 - 复制 Grid 项目代码到 Flex 场景，没删掉
justify-self，结果对齐完全失控
Flex 布局中替代 justify-self 的真实手段
Flex 不提供主轴单项目对齐的原生属性，但有更稳定、兼容性更好的替代路径：
-
margin-left: auto或margin-right: auto：把某个子项往右推（或往左），其他子项保持左对齐；margin: 0 auto可让单个子项在主轴居中（前提是它没设width） -
justify-content配合空占位项：比如加一个flex: 1的空<div>放在目标项右侧，实现右对齐效果 - 真需要独立控制多个子项的主轴位置？说明布局已超出 Flex 能力边界，该切回
display: grid，哪怕只用一列
注意：margin: auto 在 Flex 中优先级高于 justify-content，且不依赖父容器尺寸是否固定，比幻想 justify-self 可用靠谱得多。
立即学习“前端免费学习笔记（深入）”；
Grid 和 Flex 对齐属性命名相似但职责完全不同
别被名字骗了：justify- 开头的属性在两种布局里语义割裂：
- 在
display: grid中：justify-items控制每个子项在**自己单元格内**的行内轴（通常是水平）对齐；justify-self是它的子项级覆盖 - 在
display: flex中：justify-content控制**整组子项**在主轴上的空间分配方式；没有“单元格”概念，也就没有“在单元格内对齐”这回事 -
align-items和align-self才是 Flex 和 Grid 共享的交叉轴对齐机制，但 Grid 里它们作用于单元格，Flex 里作用于容器交叉轴
一个典型混淆点：justify-items: center 在 Grid 里让每列内容居中；在 Flex 里写它，等于白写。
什么时候该果断放弃 Flex 改用 Grid
当你发现自己反复想“要是能单独控制这个元素在主轴的位置就好了”，大概率 Flex 已经不是最优解：
- 需要混合对齐：部分子项左对齐、一个右对齐、一个居中 → Grid 的
justify-self+ 显式grid-column更直接 - 子项内容高度差异大，又要求各自垂直居中 → Flex 的
align-items: stretch会拉平所有项，Grid 的align-self: center可逐项控制 - 布局结构隐含行列关系（比如表单字段+操作按钮、卡片网格、仪表盘模块），哪怕视觉上是一行 → Grid 天然支持二维语义，Flex 是强行一维模拟
真正容易被忽略的是：Grid 的 justify-self 不是“高级功能”，而是基础能力的一部分；而 Flex 根本没设计这个需求——它从一开始就不打算让你单独动主轴上的某一个。
