最稳做法是给右侧元素加 margin-left: auto；它不依赖兄弟元素存在，兼容性好，而 justify-content: space-between 易因动态增删元素导致布局崩溃。

直接给右侧那个元素加 margin-left: auto，左侧元素什么都不用动——这是最稳、最轻量、浏览器兼容性最好的做法。

为什么不用 justify-content: space-between

它要求至少两个子元素，且会强制“分配”主轴剩余空间。一旦你后续动态插入或隐藏某个元素（比如权限控制下登录按钮不显示），右侧内容立刻贴左，布局崩掉。而 margin-left: auto 是绑定在具体元素上的，跟兄弟节点是否存在无关。

• 左侧元素是默认流式位置，不占额外逻辑
• 右侧元素靠 margin-left: auto 吃掉它左边所有可用空间，稳稳贴右
• 即使只剩一个元素（比如只显示“登录”），它照样靠右，不会漂移

margin-left: auto 没反应？先查这三件事

不是写错了，而是 flex 上下文被干扰了：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父容器写了 justify-content: center 或 space-between ——删掉，二者逻辑冲突，margin-left: auto 会被压制
• 你以为的“右侧元素”其实被包在一层 <div class="wrapper"> 里，真正直系子元素是那个 wrapper，但你没给它加样式 <li>DOM 中有注释、空格文本节点，或者前面有 <code>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 容器的**直系子节点**。