align-self 覆盖交叉轴对齐；它仅作用于单个子元素在交叉轴（垂直或水平，取决于 flex-direction）上的对齐，优先级高于父容器 align-items 但低于 align-content 和交叉轴方向的 margin: auto。
align-self 覆盖的是哪个对齐方向？
align-self 只影响交叉轴（cross axis）上的单个子元素对齐，和 justify-content 的主轴（main axis）完全无关。很多人调了半天 align-self 没反应，其实是把 flex-direction 设成了 row（默认），此时交叉轴是垂直方向，align-self 控制上下对齐；如果 flex-direction 是 column，交叉轴就变成水平方向，align-self 才控制左右。
常见错误现象：align-self: flex-end 在 row 布局里没效果——检查父容器是否设置了 align-items: stretch（默认值），而子元素高度又没显式设定，导致“拉伸”覆盖了 align-self 的意图。
- 必须确保子元素在交叉轴上有“可对齐的空间”：比如
flex-direction: row时，父容器要有明确高度，或子元素本身有固定高度/最小高度 -
align-self的取值优先级高于父容器的align-items，但低于 flex 容器自身的align-content（仅多行时生效） - 值为
auto时，会继承父容器的align-items，不是“重置”或“无效果”
什么时候 align-self 会被忽略？
它不是万能开关，以下情况直接失效：
- 父容器是单行 flex（
flex-wrap: nowrap）且align-items: stretch，同时子元素在交叉轴上未设置尺寸（如 height / width）、也无内容撑开——此时子元素被强制拉伸，align-self失去作用对象 - 子元素是绝对定位（
position: absolute）——脱离 flex 流，整个 flex 对齐逻辑都不再适用 - 父容器没有定义交叉轴范围：比如
flex-direction: row时父容器height: auto且子元素都靠内容撑高，就没有统一的“基线”供align-self参照
典型报错场景不存在，但浏览器 DevTools 里能看到该属性被划掉（strikethrough），说明计算值被覆盖或无效。
align-self 和 margin: auto 冲突吗？
会，而且 margin: auto 在交叉轴上优先级更高。只要子元素在交叉轴方向的 margin 是 auto，就会无视 align-self 的值，直接居中（或填满剩余空间）。
例如：
.item {
align-self: flex-start;
margin: auto 0; /* 交叉轴（垂直）方向 margin auto → 覆盖 align-self */
}
-
margin: auto是布局级干预，align-self是 flex 对齐级干预，前者更底层 - 想用
align-self就别在同方向设margin: auto；反之，想精确控制某子元素在交叉轴的位置，margin: auto更直接可靠 - 注意：只有在交叉轴方向设
auto才冲突，比如margin: 0 auto在row布局下只影响主轴，不影响align-self
多行 flex 容器里 align-self 还管用吗？
管用，但行为受限：它仍然只作用于当前子元素所在行的交叉轴对齐，不跨行生效。而整行的垂直分布由父容器的 align-content 控制。
比如三行子元素，其中一行有个子元素设了 align-self: flex-end，它只会在这行内部靠上/下对齐（取决于交叉轴），不会让它“跳到最后一行底部”。这时候容易误以为失效，其实是 align-content: flex-start 把所有行都挤到顶部了。
- 多行时，先看
align-content如何分配行间空间，再看每行内各子元素的align-self -
align-self无法让某个子元素“脱离所在行”，也不能影响其他行的位置 - 若需某子元素在多行容器中真正底部对齐，通常得结合
margin-top: auto或 wrapper +align-content: space-between
交叉轴对齐的优先级链条其实很细：容器 align-content > 单行内子元素 margin（交叉轴 auto） > 子元素 align-self > 容器 align-items。漏掉任意一环，表现就和预期不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
