margin-left: auto 能让子元素靠右，本质是“吃掉主轴起点侧（默认为左）所有剩余空间”，而非简单靠右；失效主因是 flex 上下文被破坏：父容器设了 justify-content 干扰、目标非直系子节点、dom 存在注释或空节点、flex-direction 不匹配。
直接给那个子项加 margin-left: auto，但前提是父容器是干净的 display: flex 上下文——否则大概率失效，不是写错了，而是被干扰了。
为什么 margin-left: auto 有时完全没反应
它不是“不生效”，而是被 flex 布局规则静默忽略。最常踩的坑有三个：
- 父容器写了
justify-content: flex-end、space-between或space-around—— 这些值会接管主轴空间分配，margin-left: auto被压制 - 目标元素不是父容器的直系子节点，比如被套了一层
<div class="wrapper">，结果你给 wrapper 加了样式<li>DOM 中存在注释 <code><!-- -->、空文本节点或display: none元素，导致选择器（如:last-child）没匹配到真实末尾项 -
justify-content: flex-end→ 所有子项整体右移，左端留白；改它会影响全部子项 -
margin-left: auto→ 只对该元素生效，左侧剩余空间全归它，其他子项位置完全不动 - 典型场景：导航栏里
.logo和.nav-list靠左，.login-btn单独靠右——这时绝不能设父容器justify-content: flex-end，否则整个导航都飞到右边 - 横向（
row）→ 用margin-left: auto - 纵向（
column）→ 改用margin-top: auto才能让“最后一项靠下” - 别在
column容器里硬套margin-left: auto还指望它靠右——它根本不会往右走 -
flex-wrap: wrap下，:last-child仍只匹配整个容器末尾节点，无法识别“每行最后一个”，纯 CSS 无解
margin-left: auto 和 justify-content: flex-end 的本质区别
这是逻辑层面的根本差异，混用必出问题：
响应式或竖排布局时别用错方向
margin-left: auto 只在 flex-direction: row（默认）下向右推。一旦切到竖排，它就失效了：
真正卡住人的从来不是写法本身，而是没意识到：margin-left: auto 生效的前提，是主轴空间还没被 justify-content 或嵌套结构悄悄破坏掉——DOM 层级、伪节点、换行行为，都可能让它沉默。
