align-items: baseline 经常不生效是因为它仅在 flex 容器中对直接子元素有效，且依赖子元素的字体度量、是否含文本等条件；vertical-align: baseline 则作用于内联上下文，两者适用场景和计算逻辑完全不同。
align-items: baseline 为什么经常不生效
因为 align-items 是 flex 容器的属性，只对直接子元素（flex item）起作用，且仅在 display: flex 或 display: inline-flex 的容器上有效。常见错误是把它写在文本元素自身上，或者用在 block 布局里——这时候它完全被忽略。
另外，baseline 对齐依赖子元素的 font-size、line-height、vertical-align 和是否为替换元素（如 <img alt="CSS如何制作具有对齐基线的文本布局_利用Align-items-baseline对齐css" >）等细节。哪怕一个子项是 <span></span>，另一个是 <input>，它们的基线定义就不同，对齐结果可能出人意料。
- 确保父容器设置了
display: flex，且子元素是同级直接子项 - 避免混用
vertical-align（它对 flex item 无效，但会干扰你对齐逻辑的判断） - 如果子项含内联元素（如文字+图标），建议统一用
display: inline-flex包裹再对齐，而不是靠父级 baseline
和 vertical-align: baseline 的区别在哪
vertical-align: baseline 是内联上下文（inline formatting context）里的对齐方式，作用对象是行内盒（inline boxes），比如 <span></span>、<img alt="CSS如何制作具有对齐基线的文本布局_利用Align-items-baseline对齐css" >、<input type="text"> 在同一行时的对齐；而 align-items: baseline 是 flex 布局中，所有 flex item 按各自第一行文本的基线对齐——注意：它不看行高，只看字体度量中的“基线位置”。
这意味着：两个 div 并排设为 flex + align-items: baseline，哪怕它们内容高度差很大，也会让各自第一行文字的基线严格对齐；但用 vertical-align: baseline 把两个 span 放在同一行里，只要其中一个有 line-height，实际视觉对齐点就可能偏移。
立即学习“前端免费学习笔记（深入）”；
-
vertical-align只在 inline/inline-block 场景下有意义，对块级元素无效 -
align-items: baseline要求所有子项至少有一行可渲染文本（空div无基线，会 fallback 到flex-start） - 遇到图标或 SVG 时，
align-items: baseline通常不如显式设置margin-top: calc(0.25em - 1px)可控
多行文本或不同字号下的 baseline 表现不稳定
当 flex 子项内含多行文字，或字号差异大（比如 12px 标签和 24px 标题并排），align-items: baseline 仍只取“首行第一字符”的基线，不会考虑整体内容高度或行数。结果就是小字号项看起来“飘高”，大字号项“沉底”，视觉上反而错位。
这不是 bug，是字体度量本身的特性：不同字号下，基线到字体顶部的距离比例并不固定。浏览器按字体文件提供的度量值计算，无法自动归一化。
- 若需稳定对齐，优先考虑
align-items: center+ 手动微调margin或transform - 对纯文本组合，可用
font-size-adjust缓解字号差异带来的基线漂移（但兼容性有限） - Chrome 和 Safari 对
align-items: baseline的实现略有差异，Firefox 更严格遵循字体度量；测试时别只看一个浏览器
替代方案：什么时候该放弃 baseline
当你发现加了 align-items: baseline 后，文字和旁边按钮/输入框/图标始终不对齐，大概率不是写法错了，而是场景本身不适合 baseline —— 尤其是混合了表单控件、SVG、图片和响应式字号的布局。
此时更可靠的做法是：用 align-items: center 配合 padding 或 gap 控制间距，或者给特定子项加 margin-bottom: -0.25em 类手动拉齐。现代 CSS 中，place-items 或 justify-content: start / end 组合往往比强求 baseline 更可控。
- 表单控件（
<input>,<select></select>）的基线位置由 UA 样式决定，各浏览器不一致 - 使用
rem或em动态字号时，baseline 偏移会随缩放放大，难以预测 - 真正需要 baseline 的典型场景其实很窄：比如术语表（term + definition）中多个
<dt></dt>/<dd></dd>并排展示，且都用相同字体栈
baseline 对齐不是万能胶，它是字体排印的底层机制，不是 UI 对齐工具。用之前，先确认你真的在处理“文本基线”问题，而不是单纯想让东西看起来“齐平”。
