align-self: flex-start没反应，因父容器未设display: flex、交叉轴无明确尺寸（如height为auto）、或子项设置了margin-top/bottom: auto覆盖其优先级。
直接给那个子元素加 align-self: flex-start 就行，但前提是父容器是 display: flex 且主轴为水平方向（默认）；否则它不会生效。
为什么 align-self: flex-start 没反应？
不是属性写错了，而是没满足三个硬性前提：
- 父元素必须声明
display: flex或display: inline-flex——align-self只在 Flex 上下文中有效 - 容器得有“交叉轴剩余空间”：比如
flex-direction: row时，容器要有明确高度（height或min-height），否则子项把容器撑满，flex-start看不出效果 - 子元素不能同时设
margin-top: auto或margin-bottom: auto—— 这俩会直接覆盖align-self，优先级更高
align-self: flex-start 在不同 flex-direction 下的实际方向
它永远对齐到“交叉轴起始端”，但起始端在哪，取决于主轴方向：
- 当
flex-direction: row（默认）→ 交叉轴垂直 →flex-start= 顶部对齐 - 当
flex-direction: column→ 交叉轴水平 →flex-start= 左侧对齐 - 别用
align-items: start—— 这个值非法，浏览器直接忽略；正确写法只有flex-start
和 align-items 冲突吗？怎么覆盖？
不冲突，align-self 就是专门用来覆盖 align-items 的：
- 父容器设了
align-items: center，某个子项加align-self: flex-start→ 它顶对齐，其他照旧居中 -
align-self: auto不是“清空”，而是“继承父级align-items值”，删掉该声明和设成auto效果一样 - IE10–11 不支持
self-start，只认flex-start，线上项目要兼容就得避开逻辑值
真正容易被忽略的点是：margin: auto 在交叉轴上的语义是“占满剩余空间并推位置”，它比 align-self 更霸道——调试时只要发现对齐失效，第一反应该查有没有误加 margin-top/bottom: auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
