align-items是容器级属性，控制所有子项在交叉轴上的对齐；align-self是子项级覆盖属性，优先级更高，可单独调整某子项对齐方式。
align-items 是容器级设置，作用于所有子项
它写在 display: flex 的父容器上，统一控制所有子元素在交叉轴（默认是垂直方向）上的对齐方式。比如：
.container {
display: flex;
align-items: center; /* 所有子项垂直居中 */
}
此时每个子项都会按这个规则对齐——除非被更高级的规则覆盖。
常见错误是以为它只影响“没设高度”的子项；其实它对所有子项都生效，只是 stretch（默认值）在子项有明确高度时才“不拉伸”，但对齐行为依然存在。
-
align-items: stretch仅在子项未设高度/宽度（取决于主轴方向）且未设align-self时才真正拉伸 - 即使子项写了
height: 40px，align-items: flex-end仍会让它底部对齐容器 - Grid 布局中它也有效，但含义变为“块轴”对齐，这点容易混淆
align-self 是子项级覆盖，优先级高于 align-items
它写在单个子元素上，用来“破例”：让某个子项无视父容器的 align-items，按自己的规则对齐。例如：
.special-item {
align-self: flex-start; /* 即使父容器是 align-items: center，它也顶部对齐 */
}
关键点在于：这不是“冲突”，而是设计好的覆盖机制。浏览器会先读取 align-items 作为默认值，再为每个子项检查是否有 align-self，有则替换。
-
align-self: auto表示“继承父容器的align-items值”，不是“重置为默认” - 如果父容器没写
align-items，align-self: auto等效于stretch（Flexbox 规范定义） -
绝对定位子项（
position: absolute）会脱离 Flex 流，此时align-self完全失效
什么时候该用哪个？看控制粒度
如果你要统一调整整行子项的垂直位置（如表单控件对齐、导航栏图标文字居中），直接设 align-items 最干净；如果其中某一个按钮需要“顶着容器上边”，就给它加 align-self: flex-start。
典型误用场景：
- 给所有子项都写
align-self: center，却忘了删掉父容器的align-items—— 多余且易维护错 - 在只有单个子项的容器里反复调
align-items和align-self，其实效果一样，没必要分层 - 试图用
align-self控制多行之间的间距 —— 这是align-content的职责，align-self对“行”本身无感
align-items 和 align-self 都不生效？先查这三件事
它们只在 Flex 容器及其子项上下文中起作用，失效往往不是属性写错，而是布局前提不满足：
- 父容器是否真有
display: flex或display: inline-flex？block或grid下无效 - 子项是否被
float、position: absolute或display: contents移出了 Flex 格式化上下文？ - 交叉轴方向是否被主轴方向干扰？比如
flex-direction: column时，交叉轴变成水平方向，align-items控制的就是左右对齐了
真正容易被忽略的是最后一点：很多人记住了“align-items 是垂直对齐”，却没意识到它随 flex-direction 动态切换轴向。写死“垂直”理解，迟早踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
