直接给最后一个子元素加margin-left: auto即可实现靠右对齐，前提是父容器为display: flex且flex-direction: row；失效主因是justify-content干预、目标非直系子元素或dom存在注释/空节点干扰。
直接给最后一个子元素加 margin-left: auto 就行
前提是父容器是 display: flex 且主轴为水平方向（flex-direction: row，默认值）。这个写法不改整体布局，只推单个元素，适合导航栏里“Logo 左、登录按钮右”这类场景。
常见失效不是语法错，而是上下文干扰：
- 父容器写了
justify-content: space-between或flex-end——这些会接管主轴空间分配，margin-left: auto被忽略 - 目标元素不是直系子节点，比如被套了一层
<div class="wrapper">，结果你给 wrapper 加了样式<li>DOM 中有注释、空文本节点或 <code>display: none元素，导致:last-child没匹配到真·最后一个子元素 - 用
.container > :last-child确保只选父容器的直接子元素 - 如果子元素类型明确（比如全是
<button></button>），可用.container > button:last-of-type - 若需兼容 IE11，记得加
display: -ms-flexbox前缀，否则 flex 上下文不成立 -
justify-content: flex-end→ 所有子项整体右移，左侧留白；改它会影响整个容器布局 -
margin-left: auto→ 仅该元素左侧吃掉所有剩余空间，其他子项位置完全不动 - 响应式切换
flex-direction: column时，得换用margin-top: auto，margin-left在竖排下无效 - 服务端或 JS 动态加 class，比如
class="last-in-row"标记每行末尾 - 用伪元素 +
nth-child模拟间隙，但需固定每行列数（如每行 4 个，则用:nth-child(4n)控制） - 避免依赖
:last-child，改用结构化标记：把右对齐内容单独提一层，例如<div class="right-slot"></div>，再给它margin-left: auto
:last-child 不可靠？用 .container > :last-child 替代
:last-child 只认 DOM 树中最后一个兄弟节点，不区分是否可见或是否参与布局。一个注释 <!-- comment --> 就能让它失效。
更稳妥的写法是限定层级和类型：
margin-left: auto 和 justify-content: flex-end 别混用
这是最常被搞反的点：前者只推一个元素，后者推全部。
Flex 换行后最后一行的“最后一个元素”怎么处理？
:last-child 永远只匹配整个容器的末尾节点，不管是否换行。所以 flex-wrap: wrap 下，它无法识别“每行最后一个”。
纯 CSS 无解，必须提前干预：
真正卡住人的从来不是写法本身，而是没意识到 Flex 布局里“谁在控制空间分配”。margin-left: auto 生效的前提，是主轴空间还没被 justify-content 或 flex-grow 提前瓜分完——这点一漏，调试就陷入死循环。
