align-self能覆盖align-items但只在交叉轴生效，必须同时满足父容器为flex、交叉轴有明确尺寸、子项未脱离flex流三个条件；否则即使语法正确也无视觉效果。
能覆盖，但只在交叉轴生效，且必须满足三个硬性条件——缺一不可。
align-self 为什么有时写了却没反应
不是语法错，而是底层前提没达成。最常踩的坑是：display: flex写了，但父容器交叉轴尺寸不可计算，或者子项悄悄加了margin: auto。
- 父容器没设
height或min-height（flex-direction: row时），或没设width/min-width（flex-direction: column时）→ “居中”无空间可依 - 子项写了
margin-top: auto或margin-bottom: auto（row方向）→ 直接压制align-self，后者失效 - 子项是
position: absolute或float→ 已脱离 flex 流，align-self完全不作用
align-self: center 和 align-self: auto 的区别
align-self: auto不是“取消设置”，而是明确继承父级align-items值；align-self: center才是真覆盖。
- 父容器
align-items: flex-start，子项写align-self: auto→ 仍顶对齐 - 同上父级，子项写
align-self: center→ 仅该项垂直居中，其余不变 - 父容器没设
align-items，默认为stretch，此时align-self: auto等效于stretch
flex-direction 改变后 align-self 控制哪边
它永远只管交叉轴，而交叉轴方向由flex-direction决定——别记“上下左右”，记“交叉轴终点”。
-
flex-direction: row（默认）→ 交叉轴垂直 →align-self: flex-end= 靠下 -
flex-direction: column→ 交叉轴水平 →align-self: flex-end= 靠右 - 想让某项在
column布局里“沉到底部”，该用margin-top: auto，不是align-self
多行 flex-wrap 场景下 align-self 还管用吗
管用，但作用范围被限制在当前行的交叉轴线内，不会跨行生效。
- 子项换行到第二行，
align-self: flex-end让它在第二行末尾对齐，不是整个容器底部 -
align-content控制行与行之间分布，align-self只影响本行内的位置，二者互不干扰 - 若某行只有一个子项且
align-self: stretch，它会撑满整行高度；但该行有多个子项时，stretch表现取决于它们是否等高
真正容易被忽略的是：当子项内部有文字或子元素时，align-self只对齐这个子项的盒模型本身，不控制其内部内容的对齐——文字水平居中还得靠text-align，垂直居中可能得靠display: flex或line-height手动调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
