必须用align-items: baseline的典型场景是文本与非文本元素混排，如label与input并排、按钮内嵌SVG图标加文字、多字号span同行显示；其失效主因是子项缺乏可测量文本基线，需通过包裹span、设inline-block图标等方式统一基线来源。
align-items: baseline 不是通用对齐工具，它只在「文本与非文本元素必须脚对齐」的特定排版场景中才真正必要——比如表单里的 label 和 input 并排、按钮内嵌 svg 图标加文字、多字号 span 同行显示。
什么时候必须用 align-items: baseline？
核心判断标准：子项中既有纯文本（如 label、span），又有替换元素（如 input、img、svg），且你希望它们“脚对齐”而非“顶对齐”或“居中”。
-
label与input并排时，默认视觉错位明显——label文字飘高，input看起来矮半截 - 按钮里放
svg+ 文字，图标底部需与文字基线平齐，而不是悬浮或下沉 - 同一行多个
span，字体大小不同（如14px和20px），但首行文字要严格对齐
为什么 align-items: baseline 经常“没反应”？
它不是样式开关，而是依赖每个子项都提供可测量的文本基线。失效主因是基线来源不一致或缺失：
-
div或空img没有内联内容 → 浏览器 fallback 到 margin box 底边，和其他项的文本基线不匹配 - 子项设了
display: block或display: flex→ 内部基线不可被父级感知 - 写了
vertical-align: middle在子元素上 → 直接覆盖 flex 基线逻辑，且不报错，极难排查 -
font-family不一致（如sans-serifvsmonospace）→ 同样font-size下基线物理位置偏移
怎么让 align-items: baseline 真正可靠？
关键不是调样式，而是“造基线”——统一所有子项的基线来源：
立即学习“前端免费学习笔记（深入）”；
- 给所有参与对齐的子项包裹一层
span，哪怕只是空的：<button><span>提交</span></button> - 纯图标元素（
img、svg）设为display: inline-block，并显式写vertical-align: baseline - 避免在 flex item 上同时使用
vertical-align—— 它和align-items: baseline冲突 - 某子项实在无法提供文本（如一个纯色圆点），就单独用
align-self: flex-start覆盖，别强求它参与基线对齐
真正难的不是写对 align-items: baseline，而是判断什么时候它不该出现——当内容可能换行、子项语义混杂、或目标环境不支持 align-items: last baseline 时，align-items: center 或 flex-start 配合 padding 往往更可控。
