align-self是唯一能单独控制Flex项目在交叉轴上对齐的属性，需父容器设display: flex或inline-flex才生效；取值同align-items，auto表示继承父容器align-items值。
用 align-self 属性，它是专门用来单独控制某个 Flex 项目在交叉轴上对齐的唯一方式。
必须先确保父容器是 Flex 上下文
align-self 只在父元素设置了 display: flex 或 display: inline-flex 时才生效。如果只给子元素写 align-self: center，但父容器没设 Flex，这个属性会被浏览器静默忽略。
- 检查父容器是否明确写了
display: flex - 注意不要漏掉
flex-direction的影响——它决定了哪条是交叉轴 - 例如：
flex-direction: column时，交叉轴是水平方向，align-self: center就是让元素水平居中
align-self 的常用取值和实际效果
它的可选值和 align-items 完全一致，但只作用于当前项目：
-
center：在交叉轴上居中（最常用） -
flex-start／flex-end：对齐交叉轴起点或终点，方向取决于flex-direction -
stretch（默认）：拉伸填满交叉轴尺寸（前提是该项目未设置固定高度/宽度） -
baseline：按文字基线对齐，适合含文本的行内元素，但易受字体、字号影响 -
auto：不是“无效果”，而是继承父容器的align-items值
容易踩坑的几个细节
align-self 看似简单，但实际调试中常因以下原因失效：
- 和
margin: auto冲突：只要子元素设置了margin-top: auto或margin-bottom: auto（在垂直交叉轴场景），就会完全压制 align-self，导致对齐失效 - 在
flex-wrap: wrap多行布局中，它只影响所在行的交叉轴，不会跨行生效 - 它控制的是项目盒子本身的对齐，不是内部文字——文字水平居中仍需
text-align，垂直居中可能需要额外设置line-height或嵌套 Flex - 如果项目本身有固定高度（如
height: 40px），align-self: stretch就不会拉伸
一个典型用法示例
假设父容器竖排布局，其他项靠左，只有一个按钮想水平居中：
.container {
display: flex;
flex-direction: column;
align-items: flex-start; /* 其他项默认左对齐 */
}
.special-btn {
align-self: center; /* 单独让它水平居中 */
} 
