最直接有效的方法是给该元素设置 margin-left: auto;因为在 Flex 布局中,auto 外边距会吸收主轴剩余空间,将元素挤至容器最右侧。

想让 Flex 容器内的某个元素右对齐,最直接有效的方法就是给它设置 margin-left: auto。
为什么 margin-left: auto 能右对齐?
在 Flex 布局中,自动外边距(auto margin)会吸收主轴(默认是水平方向)上剩余的可用空间。当给一个子元素设置 margin-left: auto 时,浏览器会把左侧所有剩余空间“推”给这个 margin,从而把该元素“挤”到容器最右侧。
实际写法示例
HTML 结构:
CSS:
立即学习“前端免费学习笔记(深入)”;
.container {display: flex;
}
.right-aligned {
margin-left: auto;
}
其他可行但需注意的方式
- justify-content: flex-end:会让所有子元素整体右对齐,不适合只想推某一个元素的情况
- margin-right: auto 配合 order 属性:可调整顺序再推,但更绕,一般不必要
- 用 text-align: right 对 flex 子元素无效,因为 flex 子项不受父容器 text-align 影响
基本上就这些,简单、可靠、兼容性好,不复杂但容易忽略。










