align-self写了没反应最常见原因是父容器未设display:flex或inline-flex；其他原因包括交叉轴尺寸为auto、margin:auto覆盖、子项绝对定位或浮动、stretch/baseline依赖条件不满足，且它只控制盒子本身在交叉轴的对齐。
align-self 为什么写了没反应？
最常见的情况不是属性写错，而是父容器根本不是 Flex 上下文——浏览器会静默忽略 align-self，不报错、不警告、也不渲染。
必须确认父元素设置了 display: flex 或 display: inline-flex；只给子元素加 align-self: center 是无效的。
其他高频失效原因包括：
- 父容器交叉轴尺寸为
auto（比如没设height，且子项也没撑高），此时align-self: center看不出效果 - 子元素写了
margin-top: auto或margin-bottom: auto，它会抢占交叉轴控制权，覆盖align-self - 子元素是
position: absolute或float，已脱离 Flex 流，属性完全失效
align-self 在 row 和 column 布局中分别控制哪边？
它永远只管交叉轴，而交叉轴由 flex-direction 决定：
- 当
flex-direction: row（默认），主轴水平 → 交叉轴垂直 → align-self: flex-end = 靠下
- 当
flex-direction: column，主轴垂直 → 交叉轴水平 → align-self: flex-end = 靠右
flex-direction: row（默认），主轴水平 → 交叉轴垂直 → align-self: flex-end = 靠下flex-direction: column，主轴垂直 → 交叉轴水平 → align-self: flex-end = 靠右别记“flex-end = 底部”，要记“flex-end = 交叉轴终点”。否则在 column-reverse 下会误判对齐方向。
stretch 和 baseline 这两个值为什么经常失灵？
align-self: stretch 只在子项**未设置交叉轴尺寸**时才生效：写了 height: 40px（row 布局）或 width: 200px（column 布局），拉伸立刻失效。
align-self: baseline 依赖文字内容和 font-size/line-height，块级元素默认不参与基线对齐；混排不同字号文本时，对齐线可能错位，视觉上像“没对齐”。
align-self: auto 不是“无效果”，它继承父容器的 align-items 值；父没设 align-items 就按 stretch 处理——这正是很多子项被意外拉高的原因。
和 align-items 冲突时谁说了算？
align-self 永远覆盖 align-items，但仅限当前子项：容器设了 align-items: flex-start，某子项加 align-self: center → 仅该项居中，其余不变。
多行布局（flex-wrap: wrap）下，align-self 只作用于它所在行的交叉轴基准线，不跨行、不联动；想让某子项“沉到底部”，该用 margin-top: auto，不是 align-self。
真正容易被忽略的是：align-self 控制的是子元素盒子本身的对齐，不是盒子里的文字或子元素。想让文字在盒内垂直居中，还得靠 display: flex + align-items: center 或 line-height 配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
