justify-content: baseline 在 Flex 布局中无效，因规范明确其不被支持；基线对齐应使用 align-items: baseline（交叉轴），且需子元素有可识别基线。
不常用，且在 Flex 布局中几乎无效 —— justify-content: baseline 在 flex 容器上被规范明确定义为“无效果”。
为什么 justify-content: baseline 在 Flex 中不生效
Flex 布局的主轴对齐由 justify-content 控制，但它只接受以下值：flex-start、flex-end、center、space-between、space-around、space-evenly。而 baseline 不在其中。
根据 CSS Flexible Box Layout Module Level 1 规范，justify-content 遇到 baseline 会被视为无效声明，浏览器会忽略它（回退到初始值 flex-start）。
- 即使写成
justify-content: baseline，DevTools 通常会打删除线或标为 “invalid value” - Chrome/Firefox/Safari 均不支持该值用于主轴对齐
- 基线对齐（baseline alignment）在 Flex 中是通过
align-items或align-self实现的，且仅作用于交叉轴
align-items: baseline 才是 Flex 中真正的基线对齐方式
基线对齐在 Flex 中属于交叉轴行为，必须用 align-items（容器级）或 align-self（项目级）设置，且需满足一定前提条件才能可靠生效。
立即学习“前端免费学习笔记（深入）”；
- 所有参与对齐的子元素必须有可识别的基线（例如：含文本的
<span></span>、<button></button>、<input>；不含文本的空<div> 没有基线）<li>若子项是块级元素（如 <code><p></p>），其基线取第一个行框（first line box）的基线；若无可渲染文本，则可能回退到 margin box 底边 - 混合了
inline和block子项时，对齐结果可能出人意料 —— 浏览器会尝试找“共享基线”，失败则按flex-start处理
示例：
.container {
display: flex;
align-items: baseline; /* ✅ 正确位置 */
}
.item1 { font-size: 16px; }
.item2 { font-size: 24px; } /* 二者文字底部将大致对齐 */
什么时候会误以为 justify-content: baseline 生效了
常见混淆来源有三个：
- 把 Grid 当成 Flex：CSS Grid 支持
justify-content: baseline（但实际也仅限于某些旧草案，现代 Grid 同样不支持；真正支持基线对齐的是justify-items/justify-self配合baseline，且仅对 grid item 内部内容有效） - 调试时没清缓存或 DevTools 显示滞后，误读样式覆盖状态
- 用了自定义属性或 CSS-in-JS 工具，变量展开后意外拼出
justify-content: baseline，但未报错也不生效，容易漏查
基线对齐本身语义清晰，但在 Flex 中路径很窄 —— 必须走 align-items，且高度依赖内容类型和字体渲染细节。稍有不慎就回退到默认对齐，这也是它在真实项目中极少被稳定使用的根本原因。
