align-self没反应的主因是环境不满足：父非Flex容器、交叉轴尺寸为auto、margin-auto抢占控制权、元素脱离文档流；它始终控制交叉轴，方向由flex-direction决定；stretch需子项未设交叉轴尺寸，baseline依赖文字属性；auto继承align-items；margin:auto优先级高于align-self；它对齐的是盒子本身而非内容。
align-self 为什么写了没反应？先查这四点
90% 的“不生效”不是写错了属性，而是环境不满足。浏览器遇到非 Flex 容器里的 align-self，会直接忽略它——不报错、不警告、也不渲染。
- 父容器没设
display: flex或display: inline-flex→ 属性完全静默 - 父容器交叉轴尺寸为
auto（比如height: auto且子项没撑高）→align-self: center看不出居中效果 - 子项写了
margin-top: auto或margin-bottom: auto→ 它会抢占交叉轴控制权，align-self被覆盖 - 子项是
position: absolute或用了float→ 已脱离 Flex 流，align-self失效
align-self 在 row 和 column 下分别控制哪边？
它永远只管交叉轴，而交叉轴由 flex-direction 决定，不是死记“上/下/左/右”。
-
flex-direction: row（默认）→ 主轴水平 → 交叉轴垂直 →align-self控制上下对齐（flex-start= 顶，flex-end= 底） -
flex-direction: column→ 主轴垂直 → 交叉轴水平 →align-self控制左右对齐（flex-start= 左，flex-end= 右）
别记“flex-end = 底部”，要记“flex-end = 交叉轴终点”——换方向时行为自动切换，不用改代码。
stretch 和 baseline 这两个值最容易踩坑
align-self: stretch 不是“强制拉高”，baseline 也不是“文字自动对齐”，它们都有隐含前提。
立即学习“前端免费学习笔记（深入）”；
-
stretch只在子项**未设置交叉轴尺寸**时生效：写了height: 40px或width: 200px（取决于交叉轴方向），拉伸立刻失效 -
baseline依赖文字内容、font-size和line-height；块级元素默认不参与基线对齐；混排不同字号文本时，对齐线可能错位 -
auto不是“无效果”，它继承父容器的align-items值；父容器没设align-items就按stretch处理——这就是很多子项被意外拉高的原因
和 align-items、margin: auto 混用时谁说了算？
align-self 永远覆盖 align-items，但仅限当前子项；而 margin: auto 在交叉轴上有更高优先级。
- 容器设了
align-items: flex-start，某子项加align-self: center→ 仅该项居中，其余不变 - 同一子项同时有
align-self: center和margin-bottom: auto→ 后者胜出，元素被顶到交叉轴起点（即“顶对齐”） - 想把某一项“挤到末尾”，用
margin-top: auto比align-self: flex-end更直接；后者更适合微调对齐位置
真正容易被忽略的是：align-self 控制的是子元素**盒子本身**在 Flex 行内的对齐，不是盒子里的文字或子元素。想让文字在盒内垂直居中，还得靠 display: flex + align-items: center，或者用 line-height 配合固定高度手动调。
