17370845950

最直接有效的方法是给该子项设置 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 才实现单侧对齐

一个小例子

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

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