最稳做法是给右侧元素加 margin-left: auto；它不依赖兄弟元素存在，兼容性好，而 justify-content: space-between 易因动态增删元素导致布局崩溃。
直接给右侧那个元素加 margin-left: auto，左侧元素什么都不用动——这是最稳、最轻量、浏览器兼容性最好的做法。
为什么不用 justify-content: space-between
它要求至少两个子元素，且会强制“分配”主轴剩余空间。一旦你后续动态插入或隐藏某个元素（比如权限控制下登录按钮不显示），右侧内容立刻贴左，布局崩掉。而 margin-left: auto 是绑定在具体元素上的，跟兄弟节点是否存在无关。
- 左侧元素是默认流式位置，不占额外逻辑
- 右侧元素靠
margin-left: auto吃掉它左边所有可用空间，稳稳贴右 - 即使只剩一个元素（比如只显示“登录”），它照样靠右，不会漂移
margin-left: auto 没反应？先查这三件事
不是写错了，而是 flex 上下文被干扰了：
- 父容器写了
justify-content: center或space-between——删掉，二者逻辑冲突，margin-left: auto会被压制 - 你以为的“右侧元素”其实被包在一层
<div class="wrapper">里，真正直系子元素是那个 wrapper，但你没给它加样式 - DOM 中有注释、空格文本节点，或者前面有
display: none元素，导致你用:last-child选中失败
横向 vs 纵向：别用错方向属性
margin-left: auto 只在 flex-direction: row（默认）下向右推；如果容器设了 flex-direction: column，它就变成向上推了——这时候要改用 margin-top: auto 才能让元素靠底。
立即学习“前端免费学习笔记（深入）”；
- 横向布局（导航栏、工具条）→ 用
margin-left: auto - 纵向布局（侧边栏菜单、表单分组）→ 用
margin-top: auto - 别在 column 容器里硬套
margin-left: auto还指望它靠右，它连右边 border 都碰不到
真正容易被忽略的是 DOM 结构干净度：哪怕只多一个看不见的注释节点，margin-left: auto 就可能失效。动手前先打开开发者工具，确认目标元素确实是 flex 容器的**直系子节点**。
