直接给子元素加margin-left: auto即可靠右对齐，但需确保父容器为display: flex、主轴为row且未被justify-content干预；失效主因是justify-content冲突、目标非直系子元素或dom存在注释/空节点。
直接给子元素加 margin-left: auto 就行，但上下文必须干净
这不是“技巧”，而是 flex 布局的原生行为：只要父容器是 display: flex、主轴为 row（默认），且没被 justify-content 干预，margin-left: auto 就会吃掉该元素左侧所有剩余空间，把它顶到最右边。
常见失效不是写错了样式，而是上下文不干净：
- 父容器写了
justify-content: space-between或space-around—— 这些值会接管主轴分配，margin-left: auto被忽略 - 目标元素不是直系子项，比如被包在
<div class="wrapper"> 里，结果给错对象 <li>DOM 中有注释节点、空文本节点，或前面有 <code>display: none元素，导致:last-child选不到真正最后一个子元素 -
justify-content: flex-end→ 整行子项集体右移，左端留白；改它会影响所有子项 -
margin-left: auto→ 只对该元素生效，其他子项位置完全不动 -
margin-top: auto（适用于单列） - 响应式切换时，建议用媒体查询分别控制：
@media (max-width: 768px) { .container { flex-direction: column; } .last-item { margin-top: auto; } } - 漏写
display: -ms-flexbox—— 必须和display: flex同时存在，否则 IE11 不识别 flex 上下文 -
flex: 0 1 auto（尤其隐式值）在 IE11 对flex-basis解析不稳定，建议显式写：flex-shrink: 0或-ms-flex-negative: 0
margin-left: auto 和 justify-content: flex-end 别混用
这是布局失控的高发点。两者原理完全不同：
典型场景如导航栏：.logo 和 .nav-list 左对齐，.login-btn 单独靠右。这时若设容器 justify-content: flex-end，整个导航都会飞到右边，设计就崩了。
纵向布局（flex-direction: column）别硬套 margin-left: auto
在列布局下，margin-left: auto 不会让元素靠右，它只会向上推——因为主轴已变成垂直方向。
要让“最后一项靠下”，得改用：
IE11 兼容要补旧前缀，且避免隐式 flex-shrink
IE11 支持 margin-left: auto，但有两个现实坑：
更稳的写法：.item-right { -ms-flex-negative: 0; flex-shrink: 0; margin-left: auto; }
真正决定 margin-left: auto 能不能靠右的，从来不是“有没有写对”，而是父容器 DOM 是否干净——多一个看不见的注释节点，它就可能彻底失效。
