margin-left: auto 在干净 flex 上下文中才生效，常见失效原因有三：父容器设 justify-content 干扰、目标非直系子节点、DOM 存在注释或空节点；可靠写法是父容器仅设 display: flex 且用 .container > :last-child 选择器。
margin-left: auto 能行，但只在干净的 flex 上下文里生效——不是写法错，是上下文常被干扰。
为什么 margin-left: auto 有时完全没反应
它不是失效，而是被 flex 布局规则“静默拦截”了。最常踩的坑就这三类：
- 父容器写了
justify-content: space-between或flex-end—— 这些值会接管主轴空间分配，margin-left: auto被忽略 - 目标元素不是父容器的直系子节点，比如被套了一层
<div class="wrapper">，结果你给.wrapper加了样式 - DOM 中存在注释
<!-- comment -->、空文本节点或display: none元素，导致:last-child没匹配到真正最后一个可见子元素
怎么写才真正生效（最小可靠结构）
关键不是加样式，而是清理上下文。实操建议：
- 父容器只设
display: flex，不设justify-content；若已设，优先改为justify-content: flex-start - 用
.container > :last-child替代单纯:last-child，避免伪元素或注释干扰 - 确保目标元素是真实子节点，中间无 wrapper 层；如果必须嵌套，就把
margin-left: auto加到最内层内容元素上 - 复制粘贴可跑结构：
.container { display: flex; }<br>.container > :last-child { margin-left: auto; }
margin-left: auto 和 justify-content: flex-end 别混用
这是逻辑层面的根本区别，选错会导致整个布局偏移：
立即学习“前端免费学习笔记（深入）”；
-
justify-content: flex-end→ 所有子项整体右移，左端留白；改它会影响全部子项 -
margin-left: auto→ 只对该元素生效，左侧剩余空间全归它，其他子项位置完全不动 - 典型场景如导航栏：
.logo和.nav-list左对齐，.login-btn单独靠右——这时绝不能设容器justify-content: flex-end，否则整个导航都飞到右边
换行（flex-wrap: wrap）或响应式方向切换时的现实约束
:last-child 永远只匹配整个容器的末尾节点，不管是否换行。这意味着：
-
flex-wrap: wrap下，它无法识别“每行最后一个”，纯 CSS 无解 - 移动端切为
flex-direction: column时，得换用margin-top: auto，margin-left在竖排下无效 - IE11 需同时写
display: -ms-flexbox和display: flex，漏掉前缀则 flex 上下文不成立
真正卡住人的从来不是 margin-left: auto 这个写法本身，而是没意识到：它生效的前提，是主轴空间还没被 justify-content 或 flex-grow 提前瓜分完——这点一漏，样式就挂了。
