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

想让 Flex 容器内的某个元素右对齐，最直接有效的方法就是给它设置 margin-left: auto。

为什么 margin-left: auto 能右对齐？

在 Flex 布局中，自动外边距（auto margin）会吸收主轴（默认是水平方向）上剩余的可用空间。当给一个子元素设置 margin-left: auto 时，浏览器会把左侧所有剩余空间“推”给这个 margin，从而把该元素“挤”到容器最右侧。

实际写法示例

HTML 结构：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

  

左边内容

  

右边内容

CSS：

立即学习“前端免费学习笔记（深入）”；

.container {
  display: flex;
}
.right-aligned {
  margin-left: auto;
}

其他可行但需注意的方式

• justify-content: flex-end：会让所有子元素整体右对齐，不适合只想推某一个元素的情况
• margin-right: auto 配合 order 属性：可调整顺序再推，但更绕，一般不必要
• 用 text-align: right 对 flex 子元素无效，因为 flex 子项不受父容器 text-align 影响

基本上就这些，简单、可靠、兼容性好，不复杂但容易忽略。