先记住这个答案
align-self 是写在子项上的属性，可以让单个子项覆盖容器 align-items 的对齐方式。比如容器设了 align-items: flex-start，某个子项写 align-self: center 就能单独居中对齐，其他子项不受影响。它只管交叉轴，和主轴的 justify-content 完全没有交互。
- 写在子项上，覆盖容器的
align-items - 只作用在交叉轴
- 默认值
auto继承容器的align-items - 和
justify-content互不干扰
auto 值的含义
align-self 的默认值是 auto，不是 stretch。auto 的意思是「去看容器的 align-items 是什么，我就用什么」。如果容器的 align-items 是 center，那 auto 等同于 center。
只有显式写了其他值，比如 align-self: stretch，才会覆盖容器的设定。所以说 align-self 是一个「例外处理」机制：默认跟大家一样，需要特殊对齐时才单独设置。
margin: auto 比 align-self 优先级更高
如果子项在交叉轴上设了 margin: auto，align-self 就失效了。因为 margin: auto 先把剩余空间吃掉，align-self 没有空间可以分配了。
比如子项设了 align-self: flex-start，同时又有 margin-top: auto，最终效果是 margin-top: auto 把子项推到了底部。这个优先级关系容易忘。
容易答错的地方
- 说
align-self和justify-content会冲突 - 两者完全不在同一个轴上。
align-self管交叉轴，justify-content管主轴。设了align-self: center不会影响子项在主轴上的位置。 - 以为
align-self的默认值是stretch - 默认值是
auto，意思是继承容器的align-items。只是因为align-items的默认值是stretch，所以效果看起来像是stretch。
面试官还会怎么问？
Flexbox 有 justify-self 吗？
在 Flexbox 里 justify-self 被忽略，不像 Grid 布局里那样可以控制单个子项在主轴上的对齐。如果想让某个子项在主轴上特殊定位，通常用 margin-left: auto 或 margin-right: auto 来实现。
align-self 在 Grid 布局里也能用吗？
能用，而且 Grid 里它控制的是子项在单元格内沿块轴（垂直）的对齐方式。Grid 同时还支持 justify-self 来控制行内轴（水平）的对齐，比 Flexbox 更灵活。
align-self 能设成 baseline 吗？
可以。设成 baseline 后，这个子项会按它的第一行文字基线和同行其他 baseline 对齐的子项对齐。如果行内只有它一个用 baseline，效果类似 flex-start。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。