align-self不生效的主因是父容器交叉轴无固定尺寸；其次被align-items: stretch拉伸掩盖；再者margin: auto会优先覆盖；最后父容器未启用flex布局也会导致完全失效。
Flex 布局里没有“对齐顺序”这个概念——你真正想控制的，是视觉排列顺序（用 order）或交叉轴对齐位置（用 align-self），二者不互为优先级，也不叠加生效。
为什么 align-self 看起来“没反应”？
最常见的情况是：父容器 flex-direction: row（默认），此时交叉轴是垂直方向，align-self 控制上下对齐；但子元素高度未设、父容器又没给明确 height，导致所有子项被 align-items: stretch（默认值）强制拉伸填满——align-self 失去作用对象。
- 检查 DevTools 中该属性是否被划掉（strikethrough），如果是，大概率是拉伸覆盖或脱离流（如
position: absolute） - 确保父容器在交叉轴上有可参照范围：比如
flex-direction: row时，父容器要有height或min-height -
align-self: auto不是“清空”，而是继承父容器的align-items值 - 若子元素设置了
margin: auto在交叉轴方向（如margin: auto 0），它会直接覆盖align-self
order 是怎么改变显示顺序的？
order 只影响主轴上的视觉顺序，和 DOM 顺序无关，也不影响屏幕阅读器或键盘焦点顺序。数值越小越靠前，支持负数；默认值为 0。
- 它不改变元素尺寸或对齐方式，只调整渲染位置
- 多个元素设相同
order值时，按原始 HTML 顺序排列 -
order对绝对定位子元素无效（已脱离 flex 流） - IE10–11 需加
-ms-order前缀，但仅限于基础数值，不支持负数
justify-content 和 align-items 到底管谁？
justify-content 控制主轴（flex-direction 决定方向）上所有子元素的整体分布；align-items 控制交叉轴上所有子元素的统一对齐。它们是容器级设置，不针对单个子项。
- 主轴为
row时：justify-content管左右，align-items管上下 - 主轴为
column时：justify-content管上下，align-items管左右 - 换行后（
flex-wrap: wrap），align-content才介入行与行之间的分布，此时它优先级高于align-items - 别指望
justify-content能让某个子元素“单独右对齐”——那是margin-left: auto的事
真正容易被忽略的点在于：Flex 是一维布局模型，order 和 align-self 解决的是不同轴向的问题，强行把它们当成“优先级”去调，只会陷入反复刷新 DevTools 却看不出变化的循环。先确认主轴/交叉轴方向，再决定该动哪个属性，比查文档更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
