align-self仅在父容器为flex布局时生效，控制交叉轴对齐；需先设父元素display: flex，再根据flex-direction确定交叉轴方向，其值受margin: auto、绝对定位及子项固定尺寸影响。
直接给子元素加 align-self 就行，但它只在父容器是 Flex 布局时才起作用，且只管交叉轴（不是主轴）的对齐。
必须先让父容器成为 Flex 容器
这是最常被忽略的前提。如果父元素没设 display: flex 或 display: inline-flex，align-self 会被浏览器静默忽略，不报错也没效果。
- 确保父容器有
display: flex - 注意不要被
display: contents、visibility: hidden或display: none干扰了渲染流 - 检查开发者工具中父容器的 computed display 是否确实是
flex
搞清交叉轴方向再设值
align-self 控制的是交叉轴，而交叉轴由 flex-direction 决定：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 默认
flex-direction: row→ 主轴水平，交叉轴垂直 →align-self: flex-end是底部对齐 -
flex-direction: column→ 主轴垂直，交叉轴水平 →align-self: flex-end变成右对齐，不是“贴底” - 想在 column 布局里让某子项贴容器底部？用
margin-top: auto更可靠
常见取值的实际表现和陷阱
它支持的值和 align-items 一样，但只作用于当前元素：
-
auto：不是“无效果”，而是继承父容器的align-items值；父没设就按stretch处理 -
stretch：仅当子项在交叉轴方向没有固定尺寸（如没设 height/width）时才拉伸 -
center：真居中，但若父容器交叉轴尺寸为 auto（比如高度没撑开），可能看不出效果 -
baseline：依赖文字基线，不同字体或字号容易错位，慎用
优先级和干扰因素
align-self 虽然能覆盖父容器的 align-items，但不是最高优先级：
- 如果子元素设置了
margin: auto或margin: auto 0，它会在交叉轴触发自动外边距，此时align-self会被忽略 - 绝对定位（
position: absolute）的子项已脱离 Flex 流，align-self完全无效 - 子项自身有固定高度（如
height: 60px），align-self: stretch就不会拉伸它
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
