直接给子元素加margin-left: auto即可右对齐，这是Flex原生行为：它吃掉左侧所有剩余空间，将该元素顶至容器最右；前提是父容器为display: flex、主轴为row、未被justify-content干预，且DOM结构干净。
直接给子元素加 margin-left: auto 就行
这不是“技巧”，是 Flex 布局的原生行为：只要父容器是 display: flex、主轴为 row（默认），且没被 justify-content 干预，margin-left: auto 就会吃掉该元素左侧所有剩余空间，把它顶到最右边。
常见错误不是写错了样式，而是上下文不干净：
-
justify-content: space-between或flex-end会接管主轴分配，margin-left: auto被静默忽略 - 目标元素不是直系子节点，比如被套了一层
<div class="wrapper">，结果样式加在了 wrapper 上<li>DOM 中存在注释节点 <code><!-- -->、空文本节点，或前面有display: none元素，导致选择器（如:last-child）没匹配到真实末尾项 - 父容器漏写了
display: flex，或者只写了display: -ms-flexbox（IE11 兼容时必须两者共存） -
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 是否干净——多一个看不见的注释节点，它就可能彻底失效。
