align-self没生效最常见原因是父容器未设display: flex；它只对flex项有效，且受align-items、margin:auto、尺寸约束及换行等多重因素影响。
align-self 在 flex 布局中为什么没生效
最常见原因是父容器没开启 flex 布局——align-self 只对 flex 项（即 display: flex 或 display: inline-flex 的直接子元素）有效。它不是万能居中属性，也不是 CSS Grid 里的 align-self 那套逻辑。
检查父元素是否设置了 display: flex，且没有被 display: contents、visibility: hidden 或 display: none 干扰渲染流。
- 父元素必须是 flex 容器，否则
align-self被忽略（浏览器不报错，但无效） - 如果父元素用了
flex-direction: column，交叉轴就是水平方向，此时align-self控制的是左右对齐 -
align-self不能覆盖父级的align-items: stretch对“无高度”子元素的拉伸行为——若子元素没设高度/最小高度，align-self: center看起来像没动，其实是被拉满撑开了
align-self 可用值和实际表现差异
align-self 的取值看似简单，但不同值在不同场景下效果反直觉。尤其注意 auto 不是“默认居中”，而是继承父级 align-items 的值。
-
auto：取父容器align-items的计算值（不是初始值），父没设则为stretch -
flex-start/flex-end：对齐交叉轴起点/终点，和flex-direction无关，只看当前交叉轴方向 -
center：真正居中；但若子元素本身有margin: auto，会优先按 margin 居中（flex 中 margin auto 在交叉轴也生效） -
stretch：拉伸填满交叉轴尺寸（前提是子元素在该轴上没设置固定尺寸）
示例：
.container { display: flex; align-items: flex-start; }
.item { align-self: center; } // 此时 .item 在交叉轴上居中，不受父级 align-items 影响
和 margin: auto 冲突时谁赢
在 flex 容器中，margin: auto 在交叉轴上也有居中能力，而且优先级高于 align-self。一旦子元素某侧 margin 设为 auto，align-self 就会被无视。
- 写
margin: 0 auto→ 仅水平居中（主轴），不影响align-self - 写
margin: auto或margin: auto 0→ 交叉轴也触发自动外边距，align-self失效 - 想用
align-self，就别给交叉轴方向设margin: auto；想用 margin auto 居中，就不用align-self
IE11 兼容性与 fallback 注意点
IE11 支持 align-self，但存在两个典型 bug：一是对 flex-wrap: wrap 多行容器中的子元素支持不稳定；二是当子元素含 min-height 且值大于内容时，align-self: center 可能失效。
- 避免在 IE11 中对换行 flex 容器的子元素单独设
align-self，统一用父级align-items - 若必须单个控制，加
min-height: 0或height: fit-content（IE 不支持后者，所以优先min-height: 0） - 不要依赖
align-self: self-start或self-end—— IE11 不支持这两个值，会退回到auto
真正麻烦的不是语法写错，而是它在某些尺寸组合下“看起来生效了”，其实只是巧合。交叉轴对齐问题，往往得同时盯住父容器的 align-items、子元素的尺寸约束、margin 设置、以及是否换行这四点才定位得准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
