直接给第二个子元素加margin-left: auto即可实现首左尾右对齐；因该属性仅撑开左侧剩余空间，使后续元素自然右聚，而justify-content:space-between会等分所有子项间距，元素数量变化时首尾无法贴边。
直接给第二个元素加 margin-left: auto，就能让第一个左对齐、最后一个自然右对齐——不需要包装器，也不依赖 justify-content: space-between。
为什么不用 justify-content: space-between
这个属性只在「恰好两个元素」时才让首尾贴边；一旦中间插入第三个元素（比如导航栏里多了个“帮助”链接），它会把三个元素等距拉开，首尾都不靠边。真实项目里元素数量常变，硬用 space-between 反而破坏预期布局。
- 它作用于整个容器，无法单独控制某一个子项的位置
- 当子项宽度不固定（如文字内容动态变化）时，间距计算容易失真
- 如果某个子项设置了
flex: 1或min-width，space-between的行为更难预测
margin-left: auto 是怎么起作用的
Flex 中的 margin: auto 在主轴方向上会“吃掉”该侧所有剩余空间。给第二个子元素设 margin-left: auto，等于告诉浏览器：“从这里开始，把左边空出来的所有空间都塞进这个元素的左边外边距里”，于是它和它后面的所有兄弟元素就被整体推到右侧。
- 第一个元素保持默认
margin-left: 0，自然贴左 - 第二个及之后的元素因左侧被撑满，只能挤在容器右端连续排列
- 即使后续增删元素，只要不改这个
margin-left: auto的位置，对齐逻辑依然成立
实际写法与常见错误
假设 HTML 是：
<nav><div class="logo">Logo</div> <a href="#">首页</a><a href="#">产品</a><a href="#">关于</a></nav>对应 CSS 应该是：
.nav {
display: flex;
align-items: center;
}
.nav a:first-child {
margin-left: auto;
}
- 别写成
.nav > :nth-child(2)—— 如果第一个子元素不是<div> 而是注释或文本节点，序号就乱了 <li>别给最后一个元素加 <code>margin-right: auto—— 它不会拉它自己到右边，反而可能让前面元素错位 - 如果容器设了
flex-direction: column，要改用margin-top: auto，因为主轴已变成纵向
真正容易被忽略的是：这个技巧依赖于元素在 DOM 中的顺序。一旦用 JS 动态插入、排序或隐藏中间项，margin-left: auto 的目标元素可能就不是你预期的那个了——这时得配合类名控制，而不是纯靠伪类定位。
