align-self只在父容器为flex上下文时生效，否则浏览器直接忽略；常见失效原因包括父容器未设display:flex、交叉轴尺寸为auto、margin:auto覆盖、子项绝对定位或浮动，且其控制的是交叉轴对齐（row时垂直、column时水平）。
align-self 只在父容器是 Flex 上下文时才起作用，否则浏览器直接忽略它——这是 90% 的“没生效”问题根源。
为什么 align-self 写了却没反应？
最常踩的坑不是属性写错，而是环境不满足：
- 父元素没设
display: flex或display: inline-flex，align-self完全静默失效 - 父容器交叉轴尺寸为
auto（比如高度没设、子项又没撑高），align-self: center看不出居中效果 - 子元素写了
margin-top: auto或margin-bottom: auto—— 它会优先抢占交叉轴控制权，align-self被覆盖 - 子元素是绝对定位（
position: absolute）或浮动（float），已脱离 Flex 流，属性无效
align-self 在 row 和 column 布局中分别控制哪边？
它永远只管交叉轴，而交叉轴由 flex-direction 决定：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 当
flex-direction: row（默认），主轴水平 → 交叉轴垂直 →align-self控制上下对齐 - 当
flex-direction: column，主轴垂直 → 交叉轴水平 →align-self控制左右对齐 - 别记 “
flex-end = 底部”，要记 “flex-end = 交叉轴终点”：column 下它就是靠右，不是靠下
stretch 和 baseline 这两个值最容易误用
它们行为依赖隐含条件，稍不注意就失灵：
-
align-self: stretch只在子项**未设置交叉轴尺寸**（如height或width）时才拉伸；写了height: 40px就立刻失效 -
align-self: baseline依赖文字内容和font-size/line-height，块级元素默认不参与基线对齐；混排不同字号文本时，对齐线可能错位 -
align-self: auto不是“无效果”，它继承父容器的align-items值；父没设align-items就按stretch处理 —— 这正是很多子项被意外拉高的原因
和 align-items 冲突时谁说了算？
align-self 永远覆盖 align-items，但仅限当前子项：
- 容器设了
align-items: flex-start，某子项加align-self: center→ 仅该项居中，其余不变 - 这个覆盖是渲染时发生的，不影响容器其他子项的计算逻辑
- 如果子项是多行布局（
flex-wrap: wrap），align-self只作用于它所在行的交叉轴基准线，不跨行、不联动
真正容易被忽略的是：它控制的是子元素盒子本身的对齐，不是盒子里的文字或子元素。想让文字在盒内垂直居中，还得靠 display: flex + align-items: center 或 line-height 配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
