margin-left: auto 只在 flex 容器的子元素上生效，需先将父容器设为 display: flex；否则对普通块级元素无效。
最后一个子元素用 margin-left: auto 不生效？检查父容器是否启用了 flex 布局
直接加 margin-left: auto 对普通块级元素无效，它只在 flex 容器的子项上起作用。常见错误是给目标元素加了 margin-left: auto，但父元素仍是默认的 display: block，结果毫无反应。
正确做法是先让父容器变成 flex 容器：
- 给父元素设置
display: flex - 子元素默认沿主轴（水平）排列，无需额外设
flex-direction - 对最后一个子元素单独加
margin-left: auto即可将其“推”到最右侧
示例：
.container {
display: flex;
}
.item:last-child {
margin-left: auto;
}
为什么不用 text-align: right 或 float: right？
text-align: right 只影响内联内容对齐，对块级子元素无用；float: right 会脱离文档流，可能引发父容器塌陷、后续元素错位等问题，且无法精准控制“仅最后一个”的行为。
flex 方案更干净，原因有三：
- 不破坏文档流，父容器能正常包裹所有子项
- 无需清除浮动或额外 hack
- 天然支持响应式：配合
flex-wrap: wrap和媒体查询，可平滑降级为竖排布局
IE11 下 margin-left: auto 在 flex 中表现异常？
IE11 对 flex 子项的自动外边距支持不完整，尤其是当父容器有 flex-wrap: wrap 或子项存在 flex-grow 时，margin-left: auto 可能失效或错位。
兼容方案（仅限必须支持 IE11 的场景）：
- 改用
justify-content: space-between，前提是只有两个子元素（首尾各一） - 或用绝对定位：
position: relative在父容器上，position: absolute; right: 0; top: 0;在最后一个子元素上（注意需设width或max-width防止溢出） - 避免在 IE11 中依赖
margin-left: auto实现关键布局
多个“最后一个”？比如每行最后一个都靠右
纯 CSS 无法识别“每行最后一个”，:last-child 永远只匹配整个父容器的最后一个子节点。如果用 flex-wrap: wrap，换行后的每行末尾元素不是 :last-child，自然不会被选中。
此时需换思路：
- 用 CSS Grid：设置
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，再用:nth-child(n)配合计算选择每行末尾（但需固定列数才稳定） - 更可靠的是 JS 辅助：遍历子元素，按
offsetTop分组，对每组最后一个添加 class - 若结构可控，直接在 HTML 中为每行末尾元素添加特定 class（如
last-in-row），再写.last-in-row { margin-left: auto; }
真正容易被忽略的点是：所谓“最后一个”，得先明确是 DOM 树里的最后一个，还是视觉渲染后某一行的最后一个——两者在 flex/wrap 场景下根本不是一回事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
