align-self 用于覆盖单个 flex 项目从父容器继承的交叉轴对齐方式，仅对直接子元素生效；主轴为 row 时控制垂直对齐，column 时控制水平对齐。
align-self 在 flex 容器中起什么作用
align-self 用于覆盖单个 flex 项目（item）从父容器 align-items 继承来的交叉轴对齐方式。它只对直接子元素生效，不影响嵌套的子元素或文本内容。
注意：如果父容器是水平主轴（flex-direction: row），交叉轴就是垂直方向，此时 align-self 控制上下对齐；反之，若主轴是垂直（column），则控制左右对齐。
可用值及对应效果
所有取值都作用于单个项目，常见组合如下：
-
auto：默认值，继承父容器的align-items值 -
flex-start：贴紧交叉轴起点（上/左） -
flex-end：贴紧交叉轴终点（下/右） -
center：居中对齐 -
baseline：按第一行文字基线对齐（常用于混合文本与图标） -
stretch：拉伸填满交叉轴剩余空间（默认行为，但可显式重置）
不支持 justify-content 那类的分布类值（如 space-between）。
立即学习“前端免费学习笔记（深入）”；
为什么给某个 item 设置 align-self 没反应
常见失效原因有以下几种：
- 父容器未设为 flex（缺少
display: flex或display: inline-flex） - 父容器设置了
align-items: stretch，而子项本身有固定高度/宽度，在交叉轴方向无法拉伸，导致center看起来“没动” - 子项是绝对定位（
position: absolute），脱离了 flex 流，align-self失效 - 子项设置了
margin: auto，在交叉轴方向会覆盖align-self行为（尤其在单个项目时）
调试建议：临时加个 outline: 1px solid red 看子项实际尺寸和位置，再对比父容器交叉轴尺寸。
实际用法示例：让一个按钮垂直居中、其余靠上
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 300px;
}
.item {
padding: 8px 16px;
margin: 4px;
}
.special-btn {
align-self: center;
}
这里 .container 主轴是垂直方向，所以 align-items: flex-start 让所有子项默认靠左；而 .special-btn 单独设 align-self: center，就在水平方向（当前交叉轴）居中显示。
关键点：align-self 的行为完全依赖父容器的 flex-direction 和 align-items，脱离上下文谈“居中”容易误判方向。
