align-self 未生效最常见原因是父容器非 Flex 上下文；它仅在 display: flex/inline-flex 下有效，且只作用于交叉轴，受 flex-direction 决定方向，还受子项尺寸、定位、浮动及 margin: auto 等因素影响。
align-self 为什么看起来没生效
最常见原因是父容器根本不是 Flex 上下文。align-self 只在 display: flex 或 display: inline-flex 的父元素下才被识别；如果父容器只是 div 默认的 display: block，浏览器会直接忽略该声明，连 warning 都不报。
检查时优先确认：
- 父元素是否写了 display: flex
- 是否被其他 CSS 规则（比如 display: grid）覆盖了 display 值
- 是否存在拼写错误，比如写成 align-self: 后漏掉分号或值
align-self: auto 不等于“没设置”
很多开发者以为删掉 align-self 或设为 auto 就是“恢复 align-items”，但其实 align-self: auto 是显式继承行为——它会取父容器当前的 align-items 值。如果父容器没设 align-items，那默认是 stretch，此时 align-self: auto 就等效于 stretch，不是“中性状态”。
想让某个子项真正“脱离控制”，必须写明确的非 auto 值，例如：
- align-self: center
- align-self: flex-start
- align-self: baseline
交叉轴尺寸缺失导致 stretch 失效
align-self: stretch（包括 align-self: auto 继承来的 stretch）只在子项**未设置交叉轴固定尺寸**时才拉伸。比如：
- flex-direction: row（主轴水平），交叉轴是垂直方向 → 子项不能有 height 或 min-height
- flex-direction: column（主轴垂直），交叉轴是水平方向 → 子项不能有 width 或 min-width
一旦写了 height: 40px，align-self: stretch 就彻底失效，此时即使写了 align-self: center，也可能因高度受限而视觉上“居中失败”。
子项脱离 flex 流也会让 align-self 失效
以下任意一种情况都会让 align-self 彻底不参与布局计算：
- 子项设置了 position: absolute 或 position: fixed
- 子项设置了 float: left（哪怕值是 none，某些旧引擎也受影响）
- 在交叉轴方向写了 margin: auto（例如 flex-direction: row 时写 margin: auto 0）——这会直接接管对齐，覆盖 align-self
尤其注意：用 margin: auto 实现居中很常见，但它和 align-self 是互斥机制，不能混用。
真正容易被忽略的点是：align-self 永远只作用于交叉轴，而交叉轴方向由 flex-direction 决定。很多人在 flex-direction: column 下还盯着“上下”去调 align-self，结果发现 center 没反应——其实是它正在控制“左右”对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
