最直接有效的方法是给该子项设置 margin-left: auto，因其在 Flex 布局中会吸收左侧剩余空间，将元素挤至容器最右；需确保它是 flex 容器的直系子元素且容器已设 display: flex。

想让 Flex 容器中的某个子项单独靠右对齐，最直接有效的方法就是给它设置 margin-left: auto。

为什么 margin-left: auto 能让它靠右？

在 Flex 布局中，自动外边距（auto margin）会吸收剩余的可用空间。当给某一项设置 margin-left: auto 时，浏览器会把该项左侧所有剩余空间“推”给这个 margin，从而把它“挤”到容器最右边。

使用时要注意什么？

• 该子项必须是 Flex 容器的**直系子元素**，否则不生效
• 容器需明确设置了 display: flex（或 inline-flex）
• 无需改动其他子项的样式，也不用改容器的 justify-content
• 如果同时设了 margin-right: auto，它会居中；只设 left 或 right 才实现单侧对齐

一个小例子

比如三个按钮排成一行，只想让第三个按钮靠右：

CDP浏览器大师

CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

.container { display: flex; }
.btn-third { margin-left: auto; }

基本上就这些 —— 简单、干净、不用额外包装、也不影响布局流。

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