先记住这个答案
导航栏要把登录按钮单独推向右边，可以给它设置 margin-left: auto，让左边距吸收前方所有主轴余量。这比对整行写 justify-content: space-between 更适合“前面一组、末尾一个”这种布局。它依赖主轴上有空余位置；若方向可能变成 RTL，应考虑逻辑边距 margin-inline-start，而不是把物理左侧写死。
margin-left: auto吸收左侧余量- 它可单独分隔一个项目
- 没有余量时不产生间距
- RTL 布局优先用逻辑边距
导航栏把登录按钮推向末端
导航栏左边是 logo 和链接，右边是登录按钮。给登录按钮设置 margin-left: auto，不用在中间插空白节点，也不用把整组项目设成 space-between。不过若导航内容本身已经放不下，按钮仍可能被挤出视口；此时要设计移动端菜单或允许横向滚动。需要兼容 RTL 时，通常改用 margin-inline-start: auto 表示逻辑起始侧。
.nav { display: flex; align-items: center; gap: 16px; }
.nav__login {
margin-inline-start: auto; /* 吃掉前面的空余空间 */
flex: none;
}登录按钮前的逻辑起始边距吸收剩余空间，其他链接仍按 gap 相邻。
一个自动边距吸收主轴余量
Flex 算法先求出项目目标尺寸，再将正向剩余空间分配给主轴上的自动外边距。只有一个自动边距时，它可以拿走全部剩余空间；后面的 justify-content 便没有余量可分。若多个项目或两侧都有自动边距，余量会分摊给这些边距。这个机制解释了为什么一个按钮可以被单独推到末端，而其他按钮仍挨在一起。
如果导航栏里同时有两个项目写了主轴方向的自动外边距，空余空间会在这些自动边距之间分配，结果不一定是“所有末尾项目贴右”。这是自动边距和 justify-content: space-between 的重要差别：前者可以只在某个项目之前吸收余量，后者是在整组项目之间分配。调试时把自动边距暂时改成零，确认普通对齐位置，再逐个恢复；这样能看出是哪个边距把项目推走。
容易答错的地方
- 认为左外边距一定把项目推向主轴末端
- 它是物理左边距。主轴不是从左到右时，结果可能不符合预期；逻辑方向优先用
margin-inline-start。 - 认为
justify-content: space-between完全一样 space-between分散整组项目之间的空间，自动边距可只在特定项目之前形成分隔。
面试官还会怎么问？
空间不够时 auto 外边距怎样？
正向剩余空间为零或负时，它无法吸收余量，其他项目的收缩及溢出规则继续决定结果。
放两个 margin-left: auto 会怎样？
两个自动边距分担正向余量，间隔不再全部集中在第一处。
为什么按钮还是被挤窄？
自动外边距只处理剩余空间，不禁止按钮自身收缩。需要保持按钮宽度时，可给它 flex: none。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。