align-self仅在父容器为Flex上下文且交叉轴有明确尺寸时生效；失效主因是父容器未设display:flex、交叉轴尺寸为auto、margin:auto覆盖、子项脱离Flex流，它始终控制交叉轴对齐（row时垂直，column时水平）。
直接加 align-self 就行，但它只在特定条件下才真起作用——多数“没反应”不是写错了，而是父容器或子项本身不满足 Flex 对齐前提。
为什么写了 align-self 却没变化？
这不是浏览器 bug，而是它根本没进入对齐计算流程。最常卡在这几个点上：
- 父容器没设
display: flex或display: inline-flex—— 属性被完全忽略 - 父容器交叉轴尺寸是
auto（比如没设height或min-height），子项没空间可“对齐” - 子项写了
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-end = 底部”，要记“flex-end = 交叉轴终点”
stretch 和 baseline 这两个值为什么总失灵？
它们行为依赖隐含条件，稍一不匹配就静默失效：
-
align-self: stretch只在子项**没设交叉轴尺寸**时生效；写了height: 40px或width: 200px，拉伸立刻停摆 -
align-self: baseline依赖文字内容、font-size和line-height；块级元素默认不参与基线对齐，混排不同字号文本时对齐线容易错位 -
align-self: auto不是“清空效果”，而是继承父级align-items值；删掉它和设成auto效果一样
和 margin: auto 同时用会发生什么？
优先级很明确：margin: auto（仅交叉轴方向） > align-self > align-items：
- 如果子项同时有
margin-bottom: auto和align-self: center，后者会被覆盖，元素实际被顶到交叉轴起点 - 调试时发现
align-self没反应，第一反应应是检查是否误加了margin: auto或margin-top/bottom: auto - 想把某一项“挤到末尾”，用
margin-top: auto更直观；想微调对齐位置，才用align-self
真正容易被忽略的是：它控制的是子元素**盒子本身**的对齐，不是盒子里的文字或子元素。文字垂直居中还得另加 display: flex + align-items: center 或靠 line-height 手动配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
