flex布局中无法直接对单个子元素设置主轴独立对齐，但可通过三种方式实现：1. 用margin-left/right:auto分配剩余空间；2. 用align-self调整交叉轴对齐；3. 用嵌套容器分组控制。
Flex 布局中，**不能直接对单个子元素设置主轴或交叉轴的“独立对齐”**（比如让某个 item 靠右、另一个居中），因为 justify-content 和 align-items 是作用于**整个容器**的，影响所有子项。但你可以通过以下三种实用方式，实现“视觉上单独对齐某个子元素”的效果。
用 margin 自动分配剩余空间
这是最常用、最轻量的方法：给目标子元素设置 margin-left: auto 或 margin-right: auto（主轴为 row 时），浏览器会把该元素左侧/右侧的剩余空间全部推给它，从而实现“右对齐”“左对齐”或“居中隔离”效果。
-
margin-left: auto→ 元素被挤到最右边（右侧无兄弟元素时生效） -
margin-right: auto→ 元素被挤到最左边 -
margin: 0 auto→ 水平居中（需宽度固定或不占满）
示例：让第二个按钮靠右，其余正常排列
.container { display: flex; }.btn1, .btn3 { /* 正常样式 */ }
.btn2 { margin-left: auto; }
用 align-self 调整单个子项在交叉轴的位置
align-self 是唯一真正支持“单独设置某一个子元素”的 Flex 属性，但它只作用于**交叉轴**（即垂直方向，默认主轴是水平时，交叉轴就是垂直方向）。
-
align-self: flex-start→ 顶部对齐 -
align-self: center→ 垂直居中（即使其他项不居中） -
align-self: flex-end→ 底部对齐 -
align-self: stretch→ 拉伸填满容器高度（默认值）
注意：它对主轴（左右）无效；若想水平方向单独对齐，仍需用 margin 或包裹结构。
用嵌套容器隔离控制
当需要复杂组合（比如左边一组、中间一个、右边一个图标），最清晰的做法是**分组嵌套**：把需要统一行为的子元素包进一个内层 flex 容器，再用 justify-content 控制这组的内部布局，外层容器则用 space-between 或 margin 协调各组位置。
- 外层容器设
display: flex; justify-content: space-between; - 左边放一个 div 包含多个按钮（flex + row）
- 中间放单个标题（无需额外样式）
- 右边放一个带图标的 div
这样每组内部可自由控制，又保持整体两端对齐逻辑清晰，不易出错。
