margin:auto在flex中仅在有剩余空间的主轴或交叉轴方向生效；主轴填满时单侧margin无效，四边auto仅当两轴均有剩余空间才居中，IE11不支持单方向auto。
margin:auto 在 flex 容器里为什么只在某些方向生效
因为 margin:auto 在 flex 布局中不是“万能居中”，它只对主轴（flex-direction）和交叉轴上「有剩余空间」的方向起作用。比如 flex-direction: row 时，margin-left: auto 和 margin-right: auto 都可能被忽略，但 margin-top: auto 或 margin-bottom: auto 却能推开元素——这是因为它在交叉轴（垂直方向）上有未分配的剩余空间。
常见错误现象：margin-left: auto 写了却没反应，或者元素突然跑到容器底部、右侧消失不见。
- 必须确保父容器是
display: flex，且子元素没有设置flex-grow或flex-shrink干扰空间计算 - 如果主轴已填满（比如所有子项
flex: 1），margin-left/right: auto就无处可推，会被浏览器忽略 -
margin: auto（四个方向全写）会同时在主轴和交叉轴居中，但前提是两个方向都有剩余空间；否则只在有空间的方向生效
用 margin:auto 推开 flex 子项到右侧或底部
这是最常用也最容易翻车的场景：想让某个按钮靠右、某个提示框沉底，结果加了 margin-left: auto 没反应，或加了 margin-top: auto 却整个子项掉出视口。
关键点在于「推」的前提是「有空间可推」，而空间来自 flex 容器未被子项占满的部分。
立即学习“前端免费学习笔记（深入）”；
- 推到右侧：父容器
flex-direction: row，目标子项加margin-left: auto；若无效，检查前面是否有其他子项占满主轴（比如用了flex: 1） - 推到底部：父容器
flex-direction: column，目标子项加margin-top: auto；若失效，确认父容器高度是否固定（如height: 300px），否则高度由内容撑开，无剩余空间 - 避免用
margin-right: auto推右侧——它只在右侧有明确边界（比如父容器有justify-content: flex-end）时才稳定，多数情况不如margin-left: auto可靠
margin:auto 和 justify-content / align-self 的冲突关系
margin:auto 在 flex 中优先级高于 justify-content 和 align-items，但会和单个子项的 align-self 产生覆盖行为。一旦某方向设置了 margin: auto，该方向的 align-self 就被忽略。
典型误用：给子项设了 align-self: flex-end 又加 margin-top: auto，结果发现 align-self 完全没生效。
-
margin-left/margin-right覆盖justify-content对该子项的影响 -
margin-top/margin-bottom覆盖align-self和align-items - 如果需要部分子项按
justify-content对齐、个别子项单独推，就别混用；统一用margin:auto控制更可控
IE11 下 margin:auto 的兼容性坑
IE11 对 flex 中 margin:auto 的支持不完整：它支持 margin: auto（四边全写）居中，但不支持单方向如 margin-left: auto 或 margin-top: auto ——这些会被直接忽略，导致布局错乱。
如果你的项目仍需兼容 IE11，不能依赖单方向 margin:auto 实现推开效果。
- 替代方案：用
justify-content: space-between+ 空占位子项模拟右侧对齐 - 或改用绝对定位（
position: absolute; right: 0），但需确保父容器position: relative - 检查构建工具是否注入了
flexbox旧语法补丁（如display: -ms-flexbox），它们对margin:auto支持更差
真正容易被忽略的是：哪怕现代浏览器下表现正常，只要项目还挂着 IE11 兼容要求，就得把单方向 margin:auto 当作不可用特性来处理。
