margin-left: auto 在 Flex 中右推元素，是因为它会占用主轴左侧所有剩余空间，且优先级高于 justify-content；失效常见于父容器未启用 Flex、子项非直系、或存在干扰节点。
margin-left: auto 在 Flex 中为什么能右推元素
它不是“靠左外边距变大”这种直觉理解，而是 Flex 布局明确规定的空间分配行为：当一个 flex 项的 margin-left 为 auto 时，浏览器会把该元素**左侧所有未被其他 flex 项占用的主轴剩余空间**，全部塞进它的左外边距里。
这个过程发生在 flex 项尺寸计算之后、对齐规则应用之前。关键点在于：margin-left: auto 的优先级高于 justify-content（除了 justify-content: stretch 这种不适用场景），所以即使父容器写了 justify-content: space-between，只要子项自己设了 margin-left: auto，它照样吃掉左侧空间、顶到最右。
为什么有时写了却完全没反应
90% 的“失效”不是语法错，是上下文被破坏。常见情况包括：
- 父容器设置了
justify-content: flex-end或space-around—— 这些值会接管主轴空间分配逻辑，margin-left: auto被静默忽略（注意：不是报错，是不执行） - 目标元素不是 flex 容器的**直系子节点**，比如嵌套在
<div class="wrapper"> 里，结果你给 <code>.wrapper加了样式 - DOM 中存在注释节点
<!-- -->、空文本节点或display: none元素，导致选择器（如:last-child）匹配失败，你以为选中了，其实没生效 - 父容器没写
display: flex或display: inline-flex—— Flex 特性根本没激活，margin-left: auto退化为普通块级行为（可能只在非 flex 环境下居中，而非右对齐） -
justify-content: flex-end→ 所有子项作为一个整体被右移，左侧留白；改它会影响**全部子项**的位置 -
margin-left: auto→ 只对该元素生效，它左侧的空间全归它，其他子项位置纹丝不动 - 典型场景：导航栏里
.logo和.nav-list靠左，.login-btn单独靠右。此时若设父容器justify-content: flex-end，整个导航栏都会飞到右边，设计就崩了
margin-left: auto 和 justify-content: flex-end 的本质区别
这是布局失控的高发混淆点，二者完全不是替代关系：
立即学习“前端免费学习笔记（深入）”；
横向 vs 纵向布局中 margin-left: auto 的表现差异
margin-left: auto 的方向依赖于 flex 主轴。默认 flex-direction: row 时，它向右推；一旦改成 flex-direction: column，主轴变成垂直方向，margin-left: auto 就不再影响水平位置，而是会向上推元素（因为此时 left 是“上”的方向）。
想在列布局中让某项靠底？得用 margin-top: auto 或 margin-bottom: auto，而不是死守 margin-left。
真正容易被忽略的是：这个行为只在 flex 上下文中稳定有效；一旦父容器宽度未显式定义（如 width: fit-content），或子项用了 position: absolute / float 脱离文档流，margin-left: auto 就可能表现异常甚至完全失效。
