align-items: baseline 在 flex 容器中对块级元素（如 div、p）无效，因其无天然基线，浏览器退化为 flex-start；仅对 span、img 等行内级或替换元素生效，且需避免 display: flex/grid 子项遮蔽基线。
align-items: baseline 在 flex 容器里为什么没效果？
因为 align-items: baseline 只对「flex 项目是行内级或替换元素」时才真正起作用；如果子元素是 div、p 这类块级容器，默认没有基线（baseline），浏览器会退回到 align-items: flex-start 行为——看着就像“没生效”。
- 基线对齐本质是让各项目的「第一行文本的基线」对齐，不是让容器底部/顶部对齐
-
span、img、input等天然有基线；div没有，除非它里面含文本且未被display: block截断 - 如果 flex 项目设置了
display: flex或display: grid，它内部的基线就不可见了，父级align-items: baseline无法穿透
多段文字用 baseline 对齐的正确写法
核心是：让每个要对齐的单元都成为「有基线的行内级内容」，而不是靠包裹 div 硬撑。常见做法是用 span + display: inline-block 或直接保持 inline 流动性。
- 避免用
div做文字容器，改用span并设display: inline-block（保留基线+可控宽高） - flex 容器设
align-items: baseline，子项不设vertical-align（它对 flex 项目无效） - 字体差异会影响基线位置——同一行里
font-size、font-family不一致，基线大概率错开
.container {
display: flex;
align-items: baseline;
}
.item {
display: inline-block; /* 关键：既保持基线，又可设 padding/margin */
font-size: 14px;
font-family: -apple-system, sans-serif;
}
遇到文字高度不一、基线偏移怎么办？
即使用了 inline-block，不同字号或字体的 span 基线仍可能错位，因为浏览器按字体度量（ascent/descent）算基线，不是按视觉中心。
- 用
line-height: 1配合font-size控制行高，减少行盒（line box）干扰 - 对特别难控的项，加
margin-bottom: -Xpx微调（X ≈ descent 差值），比用transform: translateY()更稳妥（后者破坏基线计算） - Chrome 和 Safari 对
baseline的实现略有差异，Firefox 更严格；测试时务必三端并行看
替代方案：什么时候该放弃 baseline 改用其他方式？
当文字来自 CMS、用户输入或字体不可控时，align-items: baseline 很容易失效，强行硬调反而增加维护成本。
- 若目标只是「底部对齐」，用
align-items: flex-end更可靠 - 若需「第一行文字底边对齐」且兼容性优先，用
display: table-cell+vertical-align: baseline（但语义和响应式受限） - 现代项目可考虑
display: grid配合align-items: baseline，grid 对基线的支持比 flex 更一致（尤其在嵌套文本场景）
基线对齐不是排版银弹，它依赖字体度量数据，而这些数据在 Web 上本就不可见、不可控。真要稳定，就得接受部分妥协——比如统一字体栈，或把对齐逻辑收进组件内部做垫片处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
