align-items: baseline 仅对行内级元素（如 span）生效，用于首字母放大与其余文字基线对齐；块级元素（如 div）无基线，会退化为 flex-start。
align-items: baseline 不能直接实现“首字母大写”的排版效果，它只负责基线对齐；首字母大写是 text-transform: capitalize 或 ::first-letter 的事。但如果你的真正需求是：**多个不同字号的文字（比如标题中首字母放大、其余小写）在 Flex 中视觉上整齐对齐**，那 align-items: baseline 就非常关键——而且容易用错。
align-items: baseline 对 span 和 div 的行为完全不同
这是最常踩的坑：把每个字或词包进 <div>，然后指望 align-items: baseline 起作用。结果发现完全没反应，文字还是上下错位。
-
align-items: baseline只对「有天然基线」的元素生效：如<span>、<img>、<input>等行内级或替换元素 -
<div>、<p>是块级元素，默认无基线；浏览器会悄悄退化为align-items: flex-start - 即使你给
<div>加了font-size和文本，只要它是块级容器，父级的baseline就“看不见”它的文字基线
首字母放大 + 基线对齐的正确 HTML 结构
想让“Hello world”变成首字母 H 放大、其余小写，并且 H 和 “ello world” 垂直对齐，必须让两者同为行内级内容，且不破坏基线传递。
- 用
<span>包首字母，再用另一个<span>包剩余文本，都放在同一行内上下文里（不要换行、不要 block 元素打断） - 父容器设
display: flex+align-items: baseline - 避免给子
<span>设display: block、display: flex或float，否则基线消失
<div class="title"> <span class="first-letter">H</span> <span class="rest">ello world</span> </div>
.title {
display: flex;
align-items: baseline;
}
.first-letter {
font-size: 48px;
}
.rest {
font-size: 24px;
}
字体族和 line-height 会悄悄破坏 baseline 对齐
即使结构完全正确，align-items: baseline 也可能看起来“没对齐”——不是 CSS 失效，而是字体设计本身导致基线位置偏移。
立即学习“前端免费学习笔记（深入）”；
- 不同
font-family的基线定义不同：比如system-ui和Georgia在同一字号下，基线高度可能差 2–3px -
line-height过大会撑开行框，让文字实际离基线更远；建议子项统一设line-height: 1或line-height: normal - 如果首字母用了特殊字体（如图标字体或 variable font），它可能根本没有标准基线，此时
align-items: baseline会回退到不可预测的行为
替代方案：当 baseline 不够稳时，用 align-self 配合 calc()
某些极端场景（比如首字母带描边、阴影，或需要像素级控制），align-items: baseline 的自动计算会失准。这时可放弃基线，改用手动微调：
- 父容器保持
display: flex，但用align-items: flex-start - 给首字母
<span>单独加align-self: flex-start，再用margin-bottom或transform: translateY()往下拉 - 偏移量建议用
calc(0.2em)这类相对单位，比固定像素更适配缩放
复杂点在于：这个偏移值不是通用的，它取决于当前字体的 descent 比例——同一套代码换种字体，就得重调。所以别写死 margin-bottom: 4px，优先靠 baseline 自动对齐；只在它明显失效时才手动干预。
