align-self生效的前提是父容器为flex/grid上下文，否则被浏览器静默忽略；常见失效原因包括父容器未设display: flex/grid、子元素position: absolute脱离布局流、margin: auto覆盖其行为、或子项固定高度导致stretch无效。
align-self 能生效的前提是：父容器必须是 Flex 或 Grid 上下文，否则该属性被浏览器静默忽略——这是 90% 的“没反应”问题的根源。
为什么 align-self 加了却没效果？
常见失效场景不是语法写错，而是上下文缺失或隐式冲突：
- 父元素没设
display: flex或display: grid，align-self直接不解析 - 子元素设置了
position: absolute，脱离了 Flex/Grid 流，属性失效 - 同时写了
margin: auto（尤其margin-top: auto或margin-bottom: auto），它会覆盖align-self行为 - 在 Flex 中，子项有固定高度（如
height: 40px），而你设了align-self: stretch，此时拉伸失效，看起来“没变化”
align-self 在 Flex 和 Grid 中的行为差异
虽然写法一致，但交叉轴方向和默认参考系不同：
- Flex 容器中，交叉轴由
flex-direction决定：row时是垂直方向，column时是水平方向；align-self: center总是对齐当前交叉轴 - Grid 容器中，
align-self始终控制**垂直对齐**（即网格区域内的上下位置），与grid-template-rows无关；水平方向要用justify-self - 两者都支持
auto，但含义一致：继承父容器的align-items值；不是“无样式”，而是“回退到上一级定义”
什么时候该用 align-self，而不是 margin 或 text-align？
明确它的职责边界，能避免误调：
- 要微调单个子项在**交叉轴/网格区域内的整体盒子位置**（比如让一个按钮在卡片里垂直居中），用
align-self - 要控制子项**内部文字或子元素的对齐**（比如按钮内文字右对齐），该用
text-align或在其内部再建 Flex/Grid - 想把某一项“推到容器底部边缘”，且不关心其他项，
margin-top: auto更直接；但若需与其他项保持统一基线（如多行表单项），align-self: baseline更可靠 - 在 Grid 多列布局中，若某列内容高度不一，
align-self: stretch（默认）会让所有项拉高；加align-self: start可避免“被撑开”
最容易被忽略的一点：当子项本身是块级容器、内部还有内容时，align-self 对齐的是这个块盒子的外边缘，不是其内容。如果看到“居中了但文字偏上”，问题不在 align-self，而在子项内部缺乏 display: flex; align-items: center 或合适的 line-height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
