给第二个子元素加 margin-left: auto 即可实现右侧对齐：首个子元素贴左，其余整体右移；需父容器为 flex 且主轴为 row，目标为直系子元素，避免 justify-content 干扰。
给第二个子元素加 margin-left: auto 就行
这是最轻量、最可控的做法：第一个子元素保持默认位置贴左，从第二个开始的所有兄弟元素被整体推到右侧。它不依赖元素数量，也不要求你提前知道有多少个“靠右项”。
常见错误是试图给最后一个元素单独设 margin-left: auto——但一旦中间插入新元素，它就不是“最后一个”了；而给第二个设，逻辑始终稳定。
- 父容器必须是
display: flex（或inline-flex），且未设置flex-direction: column - 目标元素必须是 flex 容器的**直系子元素**，不能被额外 wrapper 包裹
- 避免同时设置
justify-content: space-between或flex-end，它们会干扰margin-left: auto的空间分配行为
为什么不用 justify-content: space-between
它只在恰好两个子元素时让首尾贴边；三个及以上时，所有元素等距分布，首尾都离边框有空隙。导航栏加个“帮助”链接，布局就崩了。
justify-content 是容器级控制，影响全部子项；而 margin-left: auto 是项目级控制，只动一个点，其余完全不动。
立即学习“前端免费学习笔记（深入）”；
- 子项宽度不固定（比如文字长度变化）时，
space-between的间距计算容易失真 - 某个子项用了
flex: 1或min-width，space-between行为更难预测 - 想新增一个左对齐的 logo？得重调整个容器的
justify-content，维护成本高
IE11 兼容要补两个关键前缀
IE11 能识别 margin-left: auto，但有两个现实坑必须防：
- 父容器必须同时写
display: -ms-flexbox和display: flex，否则 flex 上下文不成立 - 靠右的元素如果隐式继承了
flex-shrink: 1（比如没显式设flex），IE11 对flex-basis解析不稳定，建议加-ms-flex-negative: 0和flex-shrink: 0
稳妥写法：
.item-right {<br> -ms-flex-negative: 0;<br> flex-shrink: 0;<br> margin-left: auto;<br>}
别在 flex-direction: column 里硬套 margin-left: auto
主轴变成垂直方向后，margin-left 是横向外边距，对“靠下”完全无效。此时该用 margin-top: auto 才能让最后一个元素贴底。
同理，如果容器是 row-reverse 或 column-reverse，margin-left: auto 会往反方向推——它永远作用于主轴起始侧，不是“视觉左侧”。
- 横向布局（
row）→ 用margin-left: auto实现靠右 - 纵向布局（
column）→ 改用margin-top: auto实现靠下 - DOM 中多一个注释节点或空文本节点，
:last-child选中就会失败，但margin-left: auto不依赖伪类，这点反而更稳
position: absolute、漏掉的旧版前缀，都可能让 margin-left: auto 静静失效。 
