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>，然后指望 <code>align-items: baseline 起作用。结果发现完全没反应，文字还是上下错位。

• align-items: baseline 只对「有天然基线」的元素生效：如 <span></span>、<img>、<input> 等行内级或替换元素
• <div>、<code><p></p> 是块级元素，默认无基线；浏览器会悄悄退化为 align-items: flex-start
• 即使你给 <div> 加了 <code>font-size 和文本，只要它是块级容器，父级的 baseline 就“看不见”它的文字基线

  首字母放大 + 基线对齐的正确 HTML 结构

  想让“Hello world”变成首字母 H 放大、其余小写，并且 H 和 “ello world” 垂直对齐，必须让两者同为行内级内容，且不破坏基线传递。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • 用 <span></span> 包首字母，再用另一个 <span></span> 包剩余文本，都放在同一行内上下文里（不要换行、不要 block 元素打断）
  • 父容器设 display: flex + align-items: baseline
  • 避免给子 <span></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></span> 单独加 align-self: flex-start，再用 margin-bottom 或 transform: translateY() 往下拉
  • 偏移量建议用 calc(0.2em) 这类相对单位，比固定像素更适配缩放

  复杂点在于：这个偏移值不是通用的，它取决于当前字体的 descent 比例——同一套代码换种字体，就得重调。所以别写死 margin-bottom: 4px，优先靠 baseline 自动对齐；只在它明显失效时才手动干预。