align-self在Flex布局中“不起作用”的根本原因是未满足生效前提：父元素必须是flex容器且子项处于交叉轴对齐场景；若父设align-items: stretch（默认）且子项无显式尺寸，则align-self效果不可见。
当 align-self 在 Flex 布局中看起来“不起作用”，最常见的原因是它被父容器的 align-items 覆盖了——但更准确地说，是 align-self 本就**不会生效于某些情况**，需要先确认是否满足前提条件。
确认父容器确实是 Flex 容器且方向支持 cross-axis 对齐
align-self 只在 Flex 项目（子元素）上有效，且只影响**交叉轴（cross axis）** 的对齐。因此必须确保：
- 父元素设置了
display: flex或display: inline-flex - 父元素没有设置
flex-direction: column却误以为垂直对齐是主轴——注意：
若flex-direction: row（默认），则 cross-axis 是垂直方向，align-self控制上下对齐；
若flex-direction: column，则 cross-axis 是水平方向，align-self控制左右对齐。
检查是否被 align-items “掩盖”了效果
align-self 的作用是**单个子项覆盖父级 align-items 的值**。但如果父级 align-items: stretch（默认值），而该子项又没有设置明确的高度（或宽度，取决于交叉轴）、且不是多行 flex 容器（flex-wrap: wrap），那么 align-self: stretch 会拉伸填满交叉轴，此时设成 flex-start 等才看得出变化。
常见误区：
立即学习“前端免费学习笔记（深入）”；
- 给子项设了
align-self: flex-start，但父容器高度没限制、子项本身也没高度——结果仍是“贴顶”，看不出区别 - 父容器
align-items: center，子项设align-self: flex-start，但子项内容少、容器高度大，视觉上偏移不明显
排除其他干扰样式
以下情况会导致 align-self 表现异常或失效：
- 子项是绝对定位（
position: absolute）——Flex 对齐属性对其无效 - 子项设置了
float或clear——脱离文档流，不再作为 Flex 项目参与布局 - 父容器是多行 Flex（
flex-wrap: wrap），但只有一行，且未设置align-content，此时align-self仍有效，但需注意：它只作用于当前行内的该项，而非整个容器
快速验证是否生效的小技巧
临时加几行调试样式，直观判断：
- 给父容器加
border: 1px solid red和固定height（如height: 200px） - 给子项加
background: lightblue和显式尺寸（如width: 60px; height: 40px） - 尝试不同值：
align-self: flex-start/center/flex-end，观察位置变化
