align-self没生效最常见原因是父容器未设display: flex；它只在flex上下文中控制交叉轴对齐，若交叉轴无明确尺寸（如height为auto）或子项设了margin: auto，则视觉上无效。
align-self 在 Flex 容器中为什么没生效？
直接给子元素设 align-self 却没变化，大概率是因为父容器不是 Flex 容器，或没设置 flex-direction: column / 未启用交叉轴对齐能力。Flex 的 align-self 只在父元素是 display: flex 或 display: inline-flex 时才起作用，且它控制的是**该子元素在交叉轴上的对齐方式**——也就是说，如果 flex-direction 是 row（默认），交叉轴就是垂直方向，align-self 才影响上下对齐；如果是 column，交叉轴变成水平方向，这时它才影响左右对齐。
常见错误：
• 父元素只写了 display: flex，但忘了交叉轴有尺寸约束（比如容器高度为 auto 且子项没撑高，就看不出垂直对齐效果）
• 给子元素设了 align-self: center，但父容器高度不够，或子项本身是 flex-shrink: 1 被压缩了
align-self 可用值及其实际表现差异
align-self 的取值和 align-items 一致，但它是单个子项的覆盖行为。关键点在于：它不会改变主轴位置，只动交叉轴；且当子项是多行（flex-wrap: wrap）时，它只作用于所在行的交叉轴对齐基准线。
-
auto：继承父容器的align-items值（最常用，默认行为） -
flex-start/flex-end：贴紧交叉轴起点/终点（例如flex-direction: row时，分别顶对齐、底对齐） -
center：居中——但注意：若父容器交叉轴尺寸为auto且无其他约束，可能看起来“没动”，因为容器没留出可居中的空间 -
stretch：拉伸填满交叉轴（默认，但会被子项自身的height/width或min-height等覆盖） -
baseline：按第一行文字基线对齐——仅对含文本的内联级子项明显，块级子项需显式设align-self: baseline并配合margin或vertical-align微调
与 align-items 冲突时谁优先？
align-self 永远比父容器的 align-items 优先级高——只要子元素显式声明了 align-self，就会覆盖掉从 align-items 继承来的值。但要注意两个边界情况：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 如果子元素是绝对定位（
position: absolute），它已脱离 Flex 流，align-self完全无效 - 如果子元素设置了
float或clear，同样会退出 Flex 格局，属性被忽略 - 使用
align-self: stretch时，若子元素设置了height或max-height，拉伸会被截断——此时要检查是否误加了限制性尺寸
实战中容易被忽略的兼容性与调试技巧
IE10–IE11 对 align-self 支持不完整：不支持 baseline，且在 flex-wrap: wrap 多行场景下行为异常。现代项目若需兼容，建议用 margin + auto 替代（如 margin: auto 0 实现垂直居中）。
调试建议：
- 在浏览器开发者工具中，勾选「Show flexbox overlays」（Chrome/Edge），能直观看到主轴、交叉轴方向及对齐基线
- 临时给父容器加
border: 1px solid red、子元素加outline: 1px dashed blue，确认尺寸和布局范围 - 把子元素的
align-self改成flex-start和flex-end对比，比只试center更容易判断是否生效
真正卡住的时候，往往不是 align-self 写错了，而是交叉轴本身没“存在感”——比如容器高度由内容撑开，又没设 min-height 或 height，那再怎么对齐也看不出差别。
