align-self 在 Flex 容器中不起作用是因为它仅对 display: flex/inline-flex 的直接子元素生效，且需子元素为块级或弹性项；主轴为 column 时控制水平对齐，多列中应与 text-align 配合使用。
align-self 在 Flex 容器中为什么不起作用？
因为 align-self 只对 Flex 子元素生效，且前提是父容器是 display: flex 或 display: inline-flex。常见错误是直接写在文本节点、伪元素或未设 flex 的祖先上——它不会向上穿透，也不会影响行内文本本身。
- 确保父容器设置了
display: flex，且子元素是块级或弹性项（比如<div>、<p>），不是纯文本或<span>（除非也设了display: block） -
align-self默认值是auto，会继承父容器的align-items；若父设了align-items: stretch，单个子项设align-self: center才会显效 - 垂直对齐只在 Flex 主轴为水平（
flex-direction: row）时才有意义；若主轴是竖直（column），align-self控制的是“水平方向”的对齐，容易混淆
多列文本场景下，该用 align-self 还是 text-align？
二者完全不冲突，但职责不同：text-align 管的是行内内容（如文字、<span>）在块容器中的水平对齐；align-self 管的是整个 Flex 子项（比如一个 <p>）在交叉轴上的位置。多列布局中，常需两者配合。
- 列容器用
display: flex，各列是<div class="col">—— 此时align-self可微调某列整体上下位置（如让一列文字顶部对齐，另一列居中） - 列内部文字用
text-align: right或text-align: center控制文字在列内的左右对齐，和align-self无关 - 若列高度不一致，
align-self: flex-start比stretch更安全，避免短文本被拉伸变形
align-self 值选 flex-start / center / baseline 时的区别
在多列文本中，baseline 最易踩坑：它按第一行文字基线对齐，但若列中含图标、sup、不同字号或行高，基线会偏移，导致视觉错位。
-
align-self: flex-start→ 顶部对齐（交叉轴起点），最稳定，适合标题+正文混排 -
align-self: center→ 居中对齐，适用于卡片式多列，但需确保列高度有参考（否则依赖内容撑开，可能不一致） -
align-self: baseline→ 仅当所有列首行都是纯文本、字号/行高一致时才可靠；含margin-top、padding或line-height差异即失效
/* 示例：三列，中间列文字居中，右侧列基线对齐（谨慎使用） */
.col:nth-child(2) { align-self: center; }
.col:nth-child(3) { align-self: baseline; }IE11 兼容性与 align-self 的 fallback 方案
IE11 支持 align-self，但存在两个隐藏问题：不支持 baseline 值；且当子项是 display: inline-block 时行为异常。真要兼容老版本，别只靠 CSS。
立即学习“前端免费学习笔记（深入）”；
- 避免在 IE11 中使用
align-self: baseline，改用flex-start+ 内部margin-top微调 - 若列内容高度差异大，用
min-height统一底线，比依赖align-self更可控 - Flex 布局本身在 IE10/11 需加
-ms-前缀，但align-self无需前缀（IE11 原生支持）；不过建议用 Autoprefixer 自动处理
真正麻烦的不是属性本身，而是多列内容动态加载后高度变化——此时 align-self 不会重计算，得靠 JS 补齐或换用 Grid。
