margin-left: auto在flex中右对齐最直接有效，但仅当父容器为干净的display: flex且无justify-content干扰、目标为直系子元素、flex-direction为row时才生效；否则因上下文破坏而静默失效。
margin-left: auto 是最直接有效的做法，但前提是它运行在干净的 display: flex 上下文中——写对了却没效果，90% 是上下文被破坏，不是语法错了。
为什么 margin-left: auto 有时完全没反应
它不是“不生效”，而是被 flex 布局规则静默忽略。常见原因有：
- 父容器写了
justify-content: flex-end、space-between或space-around—— 这些值会接管主轴空间分配，margin-left: auto被压制 - 目标元素不是父容器的直系子节点，比如被套了一层
<div class="wrapper">，结果你给 <code>.wrapper加了样式 - DOM 中存在注释
<!-- -->、空文本节点或display: none元素，导致选择器（如:last-child）没匹配到真实末尾项 - 父容器没设
display: flex或display: inline-flex—— flex 特性不会自动激活 -
justify-content: flex-end→ 所有子项整体右移，左端留白；改它会影响全部子项 -
margin-left: auto→ 只对该元素生效，左侧剩余空间全归它，其他子项位置完全不动 - 横向（
row）→ 用margin-left: auto - 纵向（
column）→ 改用margin-top: auto才能让“最后一项靠下”
margin-left: auto 和 justify-content: flex-end 的本质区别
这是逻辑层面的根本差异，混用必出问题：
典型场景：导航栏里 .logo 和 .nav-list 靠左，.login-btn 单独靠右——这时绝不能设父容器 justify-content: flex-end，否则整个导航都飞到右边。
立即学习“前端免费学习笔记（深入）”；
横向 vs 纵向布局：别用错方向
margin-left: auto 只在 flex-direction: row（默认）下向右推。一旦切到竖排，它就失效了：
别在 column 容器里硬套 margin-left: auto 还指望它靠右——它根本不会往右走，连容器右边界都碰不到。
真正卡住人的从来不是写法本身，而是没意识到：margin-left: auto 生效的前提，是主轴空间还没被 justify-content 或嵌套结构悄悄破坏掉——DOM 层级、伪节点、换行行为，都可能让它沉默。
