margin-left: auto 生效的前提是主轴空间未被 justify-content 或 flex-grow 提前分配；需确保父容器仅设 display: flex 且 justify-content: flex-start，目标元素为直系子节点，并用 .container > :last-child 精准选择。
margin-left: auto 能解决，但几乎每次失效都不是写错了样式，而是 Flex 上下文被干扰了。
为什么 margin-left: auto 没反应
这不是浏览器不支持，而是 Flex 布局规则在严格执行空间分配优先级。常见卡点有：
- 父容器写了
justify-content: space-between或flex-end—— 这些值会接管主轴空间，margin-left: auto被忽略 - 目标元素不是
.container的直系子节点，比如被套了一层<div class="wrapper">，结果你给.wrapper加了样式 - DOM 中存在注释
<!-- -->、空文本节点，或前面有display: none元素，导致:last-child没匹配到真·最后一个可见子元素
怎么写才真正生效（最小可靠结构）
关键不是“加样式”，而是构建干净的 Flex 上下文：
- 父容器只设
display: flex，删掉或显式重置justify-content: flex-start - 确保目标元素是父容器的直接子节点，中间不嵌套无关 wrapper
- 用
.container > :last-child替代单纯:last-child，避免伪元素或注释干扰 - IE11 必须同时写
display: -ms-flexbox和display: flex，漏掉前缀则整个 Flex 上下文不成立
最小可运行结构示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: -ms-flexbox;
display: flex;
}
.container > :last-child {
margin-left: auto;
}
margin-left: auto 和 justify-content: flex-end 别混用
这是最常被搞反的点：
-
justify-content: flex-end→ 所有子项整体右移，左侧留白；改它会影响整个容器布局 -
margin-left: auto→ 仅该元素左侧吃掉所有剩余空间，其他子项位置完全不动
典型场景如导航栏：.logo 和 .nav-list 左对齐，.login-btn 单独靠右——这时绝不能设容器 justify-content: flex-end，否则整个导航都飞到右边。
响应式或换行时的现实约束
:last-child 永远只匹配整个容器的 DOM 末尾节点，不管是否换行、是否可见：
- 当
flex-wrap: wrap且每行数量不固定时，:last-child无法识别“每行最后一个”，纯 CSS 无解 - 移动端切换为
flex-direction: column时，得换用margin-top: auto，margin-left在竖排下无效 - 真正卡住人的从来不是写法本身，而是没意识到：Flex 布局里“谁在控制空间分配”——
margin-left: auto生效的前提，是主轴空间还没被justify-content或flex-grow提前瓜分完
