align-self 可让弹性项单独对齐：它覆盖父容器 align-items，在交叉轴上独立对齐，但需父容器为 flex 且有明确交叉轴空间；失效常因无 height/min-height 或 stretch 冲突；取值同 align-items；多行时仅影响所在行的交叉轴线。
align-self 能否让某个弹性项单独对齐
可以，align-self 就是干这个的：它允许单个弹性子元素覆盖父容器的 align-items 设置，实现独立的交叉轴对齐。但前提是父容器必须是 display: flex 或 display: inline-flex，且主轴方向不是默认的 row 时，交叉轴方向会变化（比如 flex-direction: column 时，交叉轴变成水平方向）。
常见错误现象：align-self 没生效，多数是因为父容器没设 height 或 min-height，导致交叉轴“没空间”可对齐；或者父容器用了 align-items: stretch（默认值），而子项本身有固定高度，此时 align-self: center 看起来像没动——其实它拉伸行为被覆盖了，只是高度没变而已。
-
align-self只作用于弹性子元素，对普通块级元素无效 - 取值和
align-items一致：flex-start、center、flex-end、stretch、baseline等 - 当父容器是
flex-direction: column时，align-self: center会让子项水平居中，而非垂直居中
为什么 align-self 在某些布局里看起来“失效”
根本原因不是属性失效，而是对齐基准变了。Flex 布局中，align-self 的对齐参考的是“行（cross-axis line）”，而不是整个容器。如果所有子项都在同一行（比如宽度够、没换行），那它们共享同一条交叉轴线，align-self 表现正常；但一旦出现多行（flex-wrap: wrap），每行有自己的交叉轴线，此时 align-self 只影响它所在那一行的对齐位置。
典型场景：网格式卡片列表，用 flex-wrap: wrap 实现多行，给最后一张卡片加 align-self: flex-end，结果它只在最后一行里靠下，不会跑到整个容器底部。
立即学习“前端免费学习笔记（深入）”；
- 没有显式设置
height或min-height的 flex 容器，其交叉轴尺寸由内容撑开，align-self缺少对齐“目标” -
align-self: stretch在子项已有height或min-height时会被忽略 - 使用
margin: auto在交叉轴上也能实现类似居中效果，但原理不同（是外边距自动分配），且不依赖align-items
align-self 和 margin: auto 的区别与选择
align-self 是 flex 布局语义化对齐，受容器 align-items 影响，可被继承值覆盖；margin: auto 是通用盒模型行为，在 flex 容器中它能在主轴和交叉轴同时生效（只要对应轴上有可用空间），优先级更高，且不依赖父容器的对齐设置。
性能和兼容性影响：两者都无明显性能差异，但 margin: auto 在旧版 Safari（align-self 兼容性稍好（IE10+ 支持），但 IE 对 baseline 等值支持异常。
- 想统一控制整组子项对齐，优先用父容器的
align-items - 只想微调某一项，且确保它始终按 flex 规则对齐，用
align-self - 需要更暴力、更确定的居中（尤其跨浏览器），或同时要主轴+交叉轴居中，用
margin: auto
容易被忽略的 align-self 生效前提
很多人试了 align-self 不起作用，最后发现卡在最基础的条件上：它只在 flex 子元素上有效，且父容器必须启用 flex 上下文。另外，如果子项被设为 float、position: absolute 或 display: block（覆盖了 flex 默认的 display: flex-item），align-self 直接失效。
还有一个隐蔽点：当子项是 inline 元素（如 <span></span>）且未显式设 display: block 或 display: flex，它虽然在 flex 容器中会变成 flex item，但若内容为空或只有空白符，渲染高度可能为 0，导致 align-self: center 看不出效果。
- 检查父容器是否真有
display: flex（注意不要被display: -webkit-flex单独覆盖） - 确认子项没有
position: absolute或float，这两者会让元素脱离 flex 流 - 避免在子项上同时写
align-self和margin在交叉轴方向，后者可能覆盖前者视觉表现
