最直接方法是给子元素设 margin-left: auto，前提是父容器为 display: flex；它仅让该元素靠右，不影响其他兄弟元素，且比 justify-content: flex-end 更灵活，但需避免与 flex: 1 冲突。
子元素用 margin-left: auto 最直接
Flex 容器里让某个子元素单独靠右，不是给它加 align-self 或 justify-content，而是利用 Flex 的自动外边距特性：在它前面的元素（或它自己）上设 margin-left: auto，浏览器会把剩余空间全挤到左边，自然就“顶到右边”了。
- 必须确保父容器是
display: flex，否则margin-left: auto不起作用 - 只对当前元素生效，不影响其他兄弟元素布局
- 比用
justify-content: flex-end更灵活——后者会让所有子元素一起右移，而这里只要一个靠右 - 注意不要和
flex-grow冲突：如果该元素设了flex: 1，margin-left: auto会被忽略
justify-content: flex-end 适合所有子元素都右对齐
如果你其实想让全部子元素整体右对齐（比如导航栏末尾几个图标），那才用 justify-content: flex-end。但它不适用于“仅某一个靠右、其余居左”的场景。
- 写在父容器上，不是子元素上
- 配合
flex-direction: row（默认值）才控制水平方向；如果是列布局，得用align-items: flex-end - 如果子元素中有
flex: 1占满剩余空间，它会把其他元素“挤”到最右，但此时已不是靠对齐实现，而是靠伸缩挤压
用 margin-left: auto 时容易漏掉的兼容性细节
老版本 Safari（iOS 9–10、macOS Safari 9–10）对 margin-left: auto 在 Flex 子元素上的支持不完整，可能失效。
- 稳妥起见可加一行
margin-right: 0显式重置，避免某些旧引擎误读 - 或者降级方案：给该子元素加
margin-left: auto同时，给它前一个兄弟元素加margin-right: auto（相当于把空隙“推”到右边） - 不需要加
-webkit-前缀——现代浏览器（包括 Chrome 84+、Firefox 63+、Edge 79+）已完全支持
别用 text-align: right 或 float: right
这两个是块级布局时代的办法，在 Flex 容器里基本无效或破坏布局流。
-
text-align: right只影响内联内容对齐，对 Flex 子元素（默认是块级）没用 -
float: right会让元素脱离 Flex 流，导致尺寸计算异常、换行错乱，甚至触发父容器高度塌陷 - 哪怕看起来“凑合能用”，后续加
gap、flex-wrap或响应式规则时大概率出问题
margin-left: auto。真正容易卡住的点不在写法，而在忘了父容器没设 display: flex，或者误以为要动对齐属性——其实根本不用碰 justify-content。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
