align-self 在多列文字中不起作用，通常因父容器未设为 flex 容器或子元素非直接子节点；需确保 display: flex、检查 computed styles、区分 align-items 与 align-self 作用范围，并注意 ie11 兼容性问题。
align-self 在多列文字中不起作用？先确认父容器是 flex 容器
很多情况下 align-self 看似“失效”，其实是子元素的父级没正确设为 display: flex 或 display: inline-flex。Flex 属性只对直接子元素生效，且仅当父元素是 flex 容器时才起作用。
常见错误现象：align-self: center 写了但文字垂直位置完全没变；检查 computed styles 会发现该属性被标记为 “not applicable”。
- 确保父容器设置了
display: flex，且子元素是其**直接子节点** - 如果父容器是
div但内部还套了一层span或p，那align-self必须写在那个span上，而不是更外层 - 文字本身（如
span）若未设置高度或min-height，在单行场景下align-self可能视觉无感——因为基线对齐和行高叠加后“看起来没动”
文字多列布局中，align-self 和 align-items 的关系要分清
align-self 是单个子项的覆盖行为，align-items 是父容器对所有子项的默认对齐方式。多列文字若每列高度不一致（比如一列是单行，另一列是两行），align-items: flex-start 就会让它们顶部对齐，而你只想让其中某一列文字居中，就得用 align-self: center 单独控制。
使用场景：卡片式列表中，标题左对齐、副文本右对齐、状态标签垂直居中——三者共存于同一 flex 行内。
-
align-items设为flex-start是安全起点，避免意外拉伸 - 只有当某列内容需要区别于整体对齐逻辑时，才加
align-self；滥用会导致维护困难 - 注意
align-self对flex-direction: column的影响：此时它控制的是**水平方向**对齐（类似 justify-self），容易混淆
多行文字用 align-self: center 为什么还是偏上？
这是最常被忽略的细节：align-self: center 是按 flex 容器的交叉轴（cross axis）居中，但文字本身的行高（line-height）、上下 padding、字体度量（ascent/descent）都会干扰视觉中心。尤其当容器高度固定、文字只有一行时，center 实际是对齐到容器中点，而非文字视觉中线。
性能/兼容性影响：不用 JS 计算，纯 CSS 下没有“文字视觉垂直居中”的银弹；强行用 transform: translateY(-50%) 配合 top: 50% 会脱离文档流，可能影响可访问性。
- 优先尝试给文字容器加
height和line-height相等（适用于单行） - 多行场景改用
display: flex; flex-direction: column; justify-content: center更可靠 - 不要依赖
align-self去微调像素级偏移——它不是定位工具，而是布局对齐策略
IE11 下 align-self 不生效？得补全前缀和 fallback
IE11 对 align-self 支持有限，尤其在 flex-wrap: wrap 或嵌套 flex 场景下容易退化。它识别 -ms-align-self，但行为和标准有差异：比如不支持 self-start / self-end，只认 auto、flex-start、center、flex-end。
可给出简短示例：
column-item {
-ms-align-self: center;
align-self: center;
}
- 必须同时写带
-ms-前缀和标准属性，否则 IE11 完全忽略 - 如果项目需兼容 IE11，建议把关键对齐逻辑下沉到子容器（比如用
text-align+padding模拟），align-self当增强而非依赖 - 注意 IE11 中
align-self在flex-direction: column下基本无效，别在这条路径上浪费时间
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
