按钮用 margin-left: auto 不靠右，首先确认父容器是否设置 display: flex；若已启用 Flex 布局，需排除 flex-direction: column、justify-content 干扰及子项 flex: 1 等影响。
按钮用 margin-left: auto 不靠右？先看父容器是否启用了 flex
直接写 margin-left: auto 没反应，大概率是父元素根本没开启 Flex 布局。Flex 的自动外边距对齐只在 display: flex 或 display: inline-flex 容器里生效。
检查父级元素的 CSS，确认它有：
display: flex;
如果父容器是 div 但没设 display，那它还是普通块级流，margin-left: auto 会失效（此时它只对块级元素水平居中有效，且需配合 width）。
父容器是 flex，但按钮仍不靠右？检查是否被其他 flex 属性干扰
即使开了 display: flex，以下情况也会让 margin-left: auto 失效或表现异常：
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: column—— 此时margin-left是横向的，而主轴是纵向，不起推动作用 -
justify-content设为flex-end或space-between等 —— 它会接管主轴对齐，覆盖margin-left: auto的效果 - 按钮本身是
flex子项但设置了flex: 1或flex-grow: 1—— 它会撑满剩余空间，把margin-left: auto“挤没”
推荐做法：关闭干扰项，只保留基础 flex 布局：
.container {
display: flex;
/* 不要设 justify-content */
/* 不要设 flex-direction: column */
}
<p>.button {
margin-left: auto;
}想让多个按钮中最后一个靠右？别只给最后一个加 margin-left: auto
常见误操作：给最后一个按钮加 margin-left: auto，结果它飞到最右边，但前面的按钮还挤在左边，中间空一大片 —— 这其实是符合预期的，但未必是你想要的布局。
更可控的做法：
- 用
margin-left: auto放在第一个「分组」按钮前，把后续所有按钮推到右侧 - 或者把右侧按钮包进一个
div，对该div设置margin-left: auto
例如：
<div class="container">
<button>保存</button>
<button>取消</button>
<div class="right-group">
<button>帮助</button>
<button>设置</button>
</div>
</div>.container { display: flex; }
.right-group { margin-left: auto; }替代方案：用 justify-content: flex-end 更简洁
如果目标只是「所有按钮靠右」，比 margin-left: auto 更直接的是控制父容器：
.container {
display: flex;
justify-content: flex-end;
}但注意：这个方案无法实现「部分左对齐、部分右对齐」的混合布局；而 margin-left: auto 的价值正在于它能精准切分对齐区域 —— 这一点容易被忽略，也是它不可替代的地方。
