align-items: baseline 在 flex 容器中看似无效，实则因子元素缺乏可参与对齐的首行内联基线（如纯 block 元素、flex 子项或字体不一致），导致退化为 flex-start；需同时满足：含内联内容、未强制拉伸、字体统一。
align-items: baseline 在 flex 容器里为什么没效果
因为 align-items: baseline 不是按文字“视觉基线”对齐，而是按每个子元素的 first baseline（首行内联盒的基线）对齐——这要求子元素必须有可参与基线对齐的内联内容，且不能被 display: block 或 flex 等破坏基线参与资格。
常见失效场景：
- 子元素是纯
div且无文本、无inline子节点 → 没有基线，退化为align-items: flex-start - 子元素设置了
display: flex或display: grid→ 自身不再参与父容器的基线对齐 - 子元素用了
vertical-align: middle等干扰属性 → 基线计算被覆盖 - 字体不一致（如中英文混排）→ 各自的
font-family和font-size导致基线位置天然不同
让 align-items: baseline 正常工作的前提条件
必须同时满足以下三点，否则它只是个“看起来像没生效”的 CSS 属性：
- 子元素需是
display: inline、display: inline-block或含内联内容的display: block（比如里面有文字或span） - 子元素不能设置
align-self: stretch或其他强制拉伸行为（会覆盖基线对齐） - 所有参与对齐的子元素，其第一行文本应使用相同
font-family和font-size；若必须混用，需手动用line-height或padding微调
示例有效结构：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
align-items: baseline;
}
.item {
display: inline-block; /* 关键：保留基线参与资格 */
font-size: 16px;
font-family: -apple-system, sans-serif;
}替代方案：当 baseline 对齐不可控时该用什么
实际项目中，align-items: baseline 的脆弱性远高于实用性。更可靠的做法是放弃“自动基线”，改用明确控制：
- 用
align-items: flex-start+ 统一padding-top或margin-top模拟对齐效果 - 对文字容器加
display: inline-flex并设align-items: center，再包裹进外层 flex —— 把基线问题转为内部居中 - 需要精确对齐图标+文字时，直接用
display: flex+align-items: center，别碰baseline - 真要靠基线？只在
span、button、input这类原生内联元素之间用，别强加给自定义div
Chrome DevTools 里怎么验证 baseline 是否生效
打开开发者工具，选中 flex 容器，在 Styles 面板里找到 align-items: baseline，然后鼠标悬停其右侧的 ⓘ 图标 —— Chrome 会提示 “Baseline alignment only works for inline-level and table-cell boxes”。接着逐个检查子元素的 computed display 和 line-height，重点看 baseline-position 这一行（需在 Rendering > Paint flashing 打开后才可见）。如果某子项显示 no baseline，就说明它被排除在对齐之外了。
真正麻烦的不是写错代码，而是你以为它在对齐，其实浏览器早就悄悄 fallback 到 flex-start 了。
