margin: auto在flex中仅对主轴方向生效且需有剩余空间；主轴由flex-direction决定，row时用margin-left/right，column时用margin-top/bottom；只作用于单个子项，不可成对使用。
Flex容器里margin: auto为什么有时不生效
因为margin: auto在Flex布局中只对主轴（main axis）方向起作用，且前提是该方向上存在「剩余空间」。如果子元素尺寸加起来占满整个主轴，或者容器设置了flex-wrap: wrap且子项换行，margin: auto就完全没反应。
常见错误现象：justify-content: space-between没用、左右元素紧贴、右侧元素死活拉不到最右边。
- 确认父容器是Flex容器：
display: flex必须显式设置，不能靠继承或inline-flex误用 - 主轴方向要匹配：默认
flex-direction: row时，margin-left: auto推右，margin-right: auto推左；若改成column，就得用margin-top/bottom: auto - 避免给子元素设固定
width撑满容器，尤其别写width: 100%——它会吃掉所有剩余空间，automargin就无处可分
justify-content和margin: auto选哪个
看控制粒度。justify-content是容器级对齐策略，一次管所有子项；margin: auto是单个子项的独立声明，能实现混合对齐（比如左中右三栏，中间居中、左右贴边）。
使用场景：需要某个按钮永远钉在右侧，但其他内容动态增减；或者表单里「提交」按钮右对齐，而「取消」按钮左对齐。
立即学习“前端免费学习笔记（深入）”；
-
justify-content: flex-end会让所有子项一起挤到右端，无法单独控制某一个 -
margin-left: auto加在最后一个子元素上，就能把它“顶”到最右，前面的照常排列 - 注意兼容性：
margin: auto在Flex中的行为IE10+支持良好，但IE10下对flex-direction: column的支持有bug，慎用
左右对齐时margin: auto写在哪一个元素上
写在「想让它远离相邻项」的那个元素上。不是左边元素写margin-right: auto，也不是右边元素写margin-left: auto——而是把margin-left: auto加在右边那个元素上，它才会把自己往右推。
示例：两个按钮并排，希望「确定」在左、「取消」在右：
.container { display: flex; }
.btn-confirm { /* 不加 margin */ }
.btn-cancel { margin-left: auto; }性能影响几乎为零，但容易踩的坑是：误以为要两边都加auto，结果中间空出一大段空白——那是因为两个元素都在争抢剩余空间。
- 只在一个元素上设
margin-left: auto或margin-right: auto，不要成对写 - 如果左右都要贴边、中间内容居中，就用三个元素：
left+middle+right，给middle加margin: 0 auto（仅当主轴为row时有效） - 别用
margin: auto替代text-align——后者只对内联内容有效，两者作用域完全不同
Flex主轴判断不准导致margin: auto方向反了
Flex主轴由flex-direction决定，不是由视觉位置决定。即使你看到元素横着排，如果父容器写了flex-direction: column-reverse，主轴其实是垂直的，此时margin-left: auto根本不起作用。
调试方法：在浏览器开发者工具里直接看computed样式里的flex-direction和main-axis方向，别凭感觉猜。
- 默认
flex-direction: row→ 主轴水平 → 用margin-left/right: auto -
flex-direction: column→ 主轴垂直 → 用margin-top/bottom: auto -
flex-direction: row-reverse仍是水平主轴，但margin-left: auto会把元素推到「视觉左侧」，因为起点变了
复杂点在于，很多人改了flex-direction却忘了同步调整margin方向，结果对齐效果完全相反，还花时间查是不是CSS优先级问题。
