align-items: baseline 对齐的是各子项第一行首个可渲染字符的字体基线，而非盒子底部；它依赖字体度量（如x字母下边缘），受font-size、font-family、line-height影响，多行或无内联文本时易退化为flex-start。
align-items: baseline 对齐的是第一行文本的基线，不是盒子底部
它让每个子项「第一行第一个可渲染字符」的字体基线对齐到同一水平线。这个基线由字体本身的度量决定（比如 x 字母的下边缘），和 font-size、font-family、line-height 都有关。哪怕两个元素高度不同、内容行数不同，只要第一行有文本，浏览器就会取那个位置去对齐——所以你看到文字“看起来没对齐”，其实是基线对齐了，但降部（g/p/q 的尾巴）或升部（b/d/h 的头顶）长度不同造成的视觉错觉。
为什么 div 里放 p 或 span 后 align-items: baseline 常常失效
因为 div 默认是块级容器，没有天然基线；如果它内部只有 p 这类块级子元素，而没直接含内联文本，浏览器就 fallback 到它的 margin box 底边作为“伪基线”，结果等效于 align-items: flex-start。
- 子项是
div且内部无文本节点（比如只包了一个img或空p），它就没有可参与对齐的基线 - 子项设了
display: flex或display: grid，会切断基线传递，父级align-items: baseline完全无效 - 子项用了
vertical-align（比如vertical-align: middle），会干扰基线计算逻辑，即使写在 flex item 上也不报错，但行为不可控
什么时候它真能用，以及怎么验证是否生效
它只在满足三个硬性条件时才按预期工作：子项必须含内联文本、不能被 display 属性截断内联流、所有子项用相同 font-family 和 font-size。
- 有效结构示例：
span、button、input这类原生内联/替换元素并排，且未额外包裹div - 临时加
outline: 1px solid red到每个子项，观察第一行文字底部是否落在同一条横线上 - 用开发者工具检查 computed 样式里的
align-items值，确认没被align-self覆盖
真正难的不是写对 baseline，而是判断它该不该出现
当内容可能换行、混用图标、跨字体、或需要响应式缩放时，align-items: baseline 的脆弱性会立刻暴露——它不接受任何配置参数，无法指定“对齐第几行”或“忽略降部”。实际项目中更可控的做法，是放弃基线，改用 align-items: center 配合统一 line-height，或给子项设固定 min-height + padding-top 模拟对齐。基线对齐不是万能解法，而是一个有明确适用边界的排版工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
