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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>），其基线取第一个行框（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，且高度依赖内容类型和字体渲染细节。稍有不慎就回退到默认对齐，这也是它在真实项目中极少被稳定使用的根本原因。
