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>、<code><p></p>），不是纯文本或<span></span>（除非也设了display: block） -
align-self默认值是auto，会继承父容器的align-items；若父设了align-items: stretch，单个子项设align-self: center才会显效 - 垂直对齐只在 Flex 主轴为水平（
flex-direction: row）时才有意义；若主轴是竖直（column），align-self控制的是“水平方向”的对齐，容易混淆 - 列容器用
display: flex，各列是<div class="col"> —— 此时 <code>align-self可微调某列整体上下位置（如让一列文字顶部对齐，另一列居中） - 列内部文字用
text-align: right或text-align: center控制文字在列内的左右对齐，和align-self无关 - 若列高度不一致，
align-self: flex-start比stretch更安全，避免短文本被拉伸变形 -
align-self: flex-start→ 顶部对齐（交叉轴起点），最稳定，适合标题+正文混排 -
align-self: center→ 居中对齐，适用于卡片式多列，但需确保列高度有参考（否则依赖内容撑开，可能不一致） -
align-self: baseline→ 仅当所有列首行都是纯文本、字号/行高一致时才可靠；含margin-top、padding或line-height差异即失效
多列文本场景下，该用 align-self 还是 text-align？
二者完全不冲突，但职责不同：text-align 管的是行内内容（如文字、<span></span>）在块容器中的水平对齐；align-self 管的是整个 Flex 子项（比如一个 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>）在交叉轴上的位置。多列布局中，常需两者配合。
align-self 值选 flex-start / center / baseline 时的区别
在多列文本中，baseline 最易踩坑：它按第一行文字基线对齐，但若列中含图标、sup、不同字号或行高，基线会偏移，导致视觉错位。
/* 示例：三列，中间列文字居中，右侧列基线对齐（谨慎使用） */
.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。
