在 flex 布局中，margin: auto 能让元素靠右是因为它会自动吸收主轴方向的剩余空间；只需给目标元素设置 margin-left: auto 即可实现右对齐，前提是父容器为 display: flex 且元素未脱离文档流。
flex 布局中 margin: auto 为什么能让元素靠右
在 display: flex 的容器里，margin: auto 不仅能撑开空白，还能“吸走”剩余空间，从而把元素推到一侧。它不是靠左/右对齐，而是通过自动分配外边距来实现定位——只要该方向有可用空间，margin: auto 就会把它吃掉。
关键前提是：该元素必须是 flex 项目（即父容器是 display: flex），且不能设置 float、position: absolute 等会脱离布局流的属性。
只让一个元素靠右：给它加 margin-left: auto
这是最常用也最稳妥的做法。不需要动其他兄弟元素，也不依赖 justify-content 全局对齐方式。
-
margin-left: auto吃掉左侧所有剩余空间，元素自然贴右 - 如果同时设
margin-right: auto，它会居中（左右都吃） - 设
margin: 0 auto在单行 flex 中等效于居中；但若容器宽度不足或子项换行，行为可能意外
.container {
display: flex;
}
.item-right {
margin-left: auto;
}
多个元素想分组对齐：别全靠 margin: auto
比如左边放 logo，中间放导航，右边放登录按钮——这时不能只靠一个 margin-left: auto，否则中间项会被挤没。
立即学习“前端免费学习笔记（深入）”；
推荐组合策略：
- 用
margin-left: auto放在“中间组”之后的第一个元素上（即登录按钮） - 或者把右侧元素包进一个
<div>，再给这个 wrapper 设margin-left: auto - 避免给多个相邻元素都设
margin: auto，容易导致不可预测的间隙分配
IE11 下 margin: auto 靠右失效怎么办
IE11 对 flex 中的 margin: auto 支持不完整，尤其在交叉轴（cross axis）方向表现异常，但主轴（row 方向）通常可用。如果靠右失效，优先检查：
- 父容器是否漏写了
display: -ms-flexbox（IE11 前缀） - 该元素是否设置了
flex: 0 0 auto或类似收缩属性，IE11 对隐式flex-basis解析较弱 - 临时降级方案：
margin-left: auto+ 显式声明flex-shrink: 0
.item-right {
-ms-flex-negative: 0;
flex-shrink: 0;
margin-left: auto;
}
靠右这件事看似简单，但真正稳定生效，得盯住三件事：父容器的 flex 上下文是否干净、目标元素有没有被其他定位规则干扰、以及要不要为旧浏览器补前缀或兜底逻辑。 
