margin-left: auto 生效需满足干净 flex 上下文：父容器仅设 display: flex 且无 justify-content 干扰，目标元素为直系子节点，横向布局时使用，避免与 justify-content: flex-end 混用。
margin-left: auto 是最直接有效的做法，但写对了没效果，90% 是上下文被破坏，不是语法错了。
为什么 margin-left: auto 有时完全没反应
它不是“不生效”，而是被 flex 布局规则静默忽略。常见原因有：
- 父容器写了
justify-content: flex-end、space-between或space-around—— 这些值会接管主轴空间分配，margin-left: auto被压制 - 目标元素不是父容器的直系子节点，比如被套了一层
<div class="wrapper">，结果你给.wrapper加了样式 - DOM 中存在注释
<!-- -->、空文本节点或display: none元素，导致选择器（如:last-child）没匹配到真实末尾项 - 父容器没设
display: flex或display: inline-flex—— flex 特性不会自动激活
怎样写才真正生效（最小可靠结构）
关键不是“加样式”，而是构建干净的 flex 上下文：
- 父容器只设
display: flex，不要设justify-content；若已设，优先改为justify-content: flex-start - 确保目标元素是父容器的直接子节点，中间不能嵌套无关 wrapper
- 用
.container > :last-child替代单纯:last-child，避免伪元素或注释干扰 - 横向布局（
flex-direction: row）下用margin-left: auto；竖向布局（column）下必须改用margin-top: auto
最小可运行示例：
立即学习“前端免费学习笔记（深入）”；
.container { display: flex; }
.container > :last-child { margin-left: auto; }别和 justify-content: flex-end 混用
这是逻辑层面的根本差异，混用必出问题：
-
justify-content: flex-end→ 所有子项整体右移，左端留白；改它会影响全部子项 -
margin-left: auto→ 只对该元素生效，左侧剩余空间全归它，其他子项位置完全不动 - 典型场景：导航栏里
.logo和.nav-list靠左，.login-btn单独靠右——这时绝不能设父容器justify-content: flex-end，否则整个导航都飞到右边
真正卡住人的从来不是写法本身，而是没意识到：margin-left: auto 生效的前提，是主轴空间还没被 justify-content 或嵌套结构悄悄破坏掉——DOM 层级、伪节点、换行行为，都可能让它沉默。
