align-items: baseline 会让元素看起来“偏高”是因为替换元素（如input、img）的基线位于下边缘上移x高度处，而非文字底部；替代方案包括flex-end（底对齐）、center（居中）、align-self单独调整等。
为什么 align-items: baseline 会让元素看起来“偏高”或“错位”
因为 baseline 对齐的是各子元素的**基线（baseline）**，不是文字底部，更不是容器底边。而像 input、button、img 这类替换元素（replaced elements）的基线默认是其**下边缘向上偏移一个字母 x 高度的位置**（约等于字体的 ex 单位），所以视觉上会比纯文本“浮高”。常见表现：一行里 span 文字和 input 并排时，input 看起来“顶着上面”。
align-items: baseline 的替代方案怎么选
根据实际对齐目标切换，别硬扛 baseline：
- 想让所有子元素**底部对齐** → 改用
align-items: flex-end - 想让内容**垂直居中**（最常用）→ 改用
align-items: center - 需要保留基线对齐但微调某个元素 → 给该元素加
margin-bottom或align-self: flex-end - 仅对文字类元素做基线对齐（如
label+input）→ 把input设为align-self: baseline，其余保持center，避免全局影响
用 align-self 单独修正某个 flex 子项
比改整个容器的 align-items 更精准，尤其适合表单控件混排场景：
form {
display: flex;
align-items: center; /* 默认居中 */
}
input,
select,
button {
align-self: baseline; /* 只让表单控件走基线 */
}
label {
align-self: center; /* 标签仍居中，视觉更稳 */
}注意：align-self 会覆盖父容器的 align-items，但只作用于当前元素；如果子元素本身是 flex 容器，它内部的 align-items 不受影响。
立即学习“前端免费学习笔记（深入）”；
图片和图标在 baseline 下偏移的快速修复
img 和 svg 是典型的替换元素，基线位置不可见但影响大。不用 JS 计算，直接 CSS 控制：
- 让图片按底部对齐：
vertical-align: bottom（仅对 inline/inline-block 有效，flex 下无效）→ 改用align-self: flex-end - 让图标和文字真正“脚对脚”：
img { align-self: flex-end; margin-top: auto; } - 更通用做法：统一设
img { vertical-align: middle; }（适用于非 flex 场景），但在 flex 容器中必须用align-self
复杂点在于：不同字体、不同字号下基线位置会变，所以靠 baseline 做精确对齐本身就不可靠。真要像素级对齐，优先考虑 center 或 flex-end，再配合 margin 微调。
