margin-left: auto仅在Flex容器的直接子元素上生效，且父容器必须设为display: flex；否则无效。常见错误是遗漏父级flex声明、误用于非直系子元素或column方向容器。
Flex容器必须设为display: flex
没这一步，margin-left: auto 在子元素上完全无效——它只在 Flex 项目（flex item）上起作用，而前提是父容器是 Flex 上下文。常见错误是只给子元素加 margin-left: auto，却忘了父级漏了 display: flex。
使用场景：导航栏里 logo 左对齐、右侧几个按钮右对齐；工具栏中主操作按钮靠左、辅助按钮靠右。
- 别用
inline-flex除非你明确需要内联行为（比如嵌入文字流），多数布局用flex就够了 - 如果容器有
flex-direction: column，margin-left: auto不会生效，得换margin-top: auto - IE10–11 对
margin-left: auto支持不稳定，若需兼容，得 fallback 到justify-content: space-between或绝对定位
右侧固定内容要单独包裹一层
直接给多个右侧元素分别加 margin-left: auto 会出问题：它们彼此紧挨着左对齐，不是整体右对齐。正确做法是把右侧所有内容包进一个 div 或 section，再给这个容器加 margin-left: auto。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<nav class="navbar">
<div class="logo">Logo</div>
<div class="nav-right" style="margin-left: auto;">
<button>登录</button>
<button>注册</button>
</div>
</nav>
- 不推荐用
:last-child选中最后一个子项来加margin-left: auto，语义不清且易被动态插入破坏 - 如果右侧内容是响应式折叠的（如移动端 hamburger 菜单），确保包裹层在 DOM 中位置不变，否则
margin-left: auto会失效 - 避免用
float或position: absolute混用，会脱离 Flex 流，导致对齐逻辑错乱
justify-content: space-between 更适合两端固定场景
如果你的左侧和右侧内容都是固定宽度（比如 logo + 几个图标），且中间不需要填充内容，justify-content: space-between 往往比 margin-left: auto 更干净、更可控。
区别在于：margin-left: auto 是“推”右侧容器，而 justify-content: space-between 是“分配”剩余空间。
-
justify-content: space-between要求至少两个子元素，否则右侧内容会贴左（因为没“之间”可分） - 当左侧内容宽度动态变化（比如多语言文案长度不同），
margin-left: auto更鲁棒；space-between可能导致右侧“漂移” - 注意
gap属性会影响space-between的视觉间距，但不影响margin-left: auto的行为
margin-left: auto 在 flex item 上才有效
这是最容易卡住的地方：有人把 margin-left: auto 写在非 Flex 项目上，比如直接写在 body 或某个 div 上，结果毫无反应。它只对 Flex 容器的**直系子元素**生效。
常见错误现象：margin-left: auto 写了但没效果，检查三点：
- 父元素是否真有
display: flex（不是inline-flex以外的其他 display 值） - 目标元素是否是该父元素的**直接子节点**（中间没嵌套 wrapper）
- 目标元素是否被设了
flex: none或flex-shrink: 0等属性干扰了布局计算（一般不影响 margin，但极端 case 下可能触发浏览器渲染差异）
真正麻烦的是嵌套 Flex：外层 display: flex，内层又套了一层 display: flex，这时候 margin-left: auto 的作用域就容易搞混。记住——它永远只作用于当前 Flex 容器的子项。
