直接给目标子元素加 margin-left: auto 即可右对齐，但需确保其为 flex-direction: row 容器的直系子元素，且父容器未设 justify-content（如 space-between、center）等覆盖主轴分配的属性。
直接给目标子元素加 margin-left: auto 就行，但必须确保它在干净的 flex 主轴（flex-direction: row）上下文中——否则不是写错了，而是被覆盖或结构干扰了。
为什么 margin-left: auto 有时完全没反应
这不是浏览器 bug，是 flex 布局规则在严格执行。最常卡住人的就这三点：
- 父容器设了
justify-content: space-between、space-around或center—— 这些值会接管主轴空间分配，margin-left: auto虽然语法合法，但行为被压制 - 你以为的目标元素其实不是 flex 容器的直系子元素，比如它被包在一层
<div class="wrapper"> 里，而你给 <code>.wrapper加了margin-left: auto - DOM 中存在注释节点、空文本节点，或前面有
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还指望它靠右——它根本不会往右走，连容器右边界都碰不到
margin-left: auto 和 justify-content: flex-end 的本质区别
这是最容易混淆的点：
横向 vs 纵向布局：别用错方向属性
margin-left: auto 只在 flex-direction: row（默认）下向右推；一旦改成列布局，它就变成向上推了：
真正容易被忽略的是 DOM 结构干净度：哪怕只多一个看不见的注释节点，margin-left: auto 就可能失效。动手前先打开开发者工具，确认目标元素确实是 flex 容器的直系子节点。
