align-items: baseline 是让所有 flex 项的第一行文本基线对齐到同一水平线，基线由字体的 font-size、line-height 和 font-family 决定；仅当子项含可渲染的 inline-level 内容且未被 vertical-align 破坏时才生效，否则退化为 flex-start。
align-items: baseline 是怎么对齐的
它不是按容器顶部、中心或底部对齐，而是让所有 flex 项的**第一行文本的基线（baseline）**对齐到同一水平线上。这个“基线”是字体排印中的概念，大致对应小写字母如 x 的下边缘，但具体位置由字体的 font-size、line-height 和 font-family 共同决定。
关键点：只有参与基线对齐的子项里有**可渲染的文本内容（或 inline-level 内容）**，且未被 vertical-align 显式破坏时，align-items: baseline 才能表现出预期效果；纯空 div 或仅含 block 子元素的 flex 项可能退化为 flex-start 行为。
为什么有时看起来没对齐？常见原因
实际开发中 align-items: baseline 经常“失灵”，根本原因是浏览器对基线的计算逻辑比直觉复杂：
- 若某子项没有文本节点（比如只含一个
img或空div），它会 fallback 到自己的 margin box 底边作为“基线替代”，导致错位 -
font-size差异大时，不同字体的基线位置不一致（例如14px sans-serifvs20px monospace） - 子项设置了
vertical-align: top/middle/bottom，会覆盖 flex 基线对齐逻辑 - 子项是
display: block且内部无 inline 内容，则其基线定义为 margin box 下边缘 —— 这和文本基线完全不是一回事
怎么让它真正按文本基线对齐
确保每个参与对齐的子项都满足「有可测量的 inline-level 基线」条件。最稳妥的做法是统一包裹一层 span 或设置 display: inline-flex 容器，并显式控制 vertical-align：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
align-items: baseline;
}
<p>.item {
/<em> 确保有内联上下文 </em>/
display: inline-flex;
flex-direction: column;
}</p><p>.item > <em> {
/</em> 避免子元素干扰基线定位 */
margin: 0;
}</p><p>/<em> 或更简单：每个 item 内至少有一个 inline 元素 </em>/
.item::before {
content: "";
display: inline-block;
vertical-align: baseline;
}如果只是想让文字首行对齐，又不想被字体差异干扰，更可控的方式其实是：align-items: flex-start + 统一 padding-top 或 margin-top 微调 —— 基线对齐本质是排版细节，不是布局工具。
flexbox 中 baseline 对齐的兼容性陷阱
Chrome/Firefox/Edge 新版本基本一致，但 Safari（尤其 iOS ≤15）对 align-items: baseline 在嵌套 flex 或含 transform 的子项上表现不稳定；部分场景会忽略基线而回退到 flex-start。
另一个容易被忽略的点：align-items: baseline 只影响 cross-axis（垂直方向）对齐，不影响 main-axis；且它**不会拉伸子项高度**，子项仍保持自身 height 或内容高度 —— 如果你期望等高+基线对齐，得额外加 align-self: stretch 或手动设高。
基线对齐不是“视觉居中”，也不是“文字底边对齐”，它是字体度量系统的一部分；用之前最好先检查各子项是否真有可比的 baseline，否则很容易变成调试黑洞。
