最轻量且兼容性好的方案是用flex-grow撑开伪元素空间并配合::before/::after实现文字居中、线铺满两端，关键在于flex:1（含flex-basis:0）确保均分剩余空间，避免border或background干扰盒模型与布局。
直接用 flex-grow 撑开伪元素空间、配合 ::before/::after 实现“文字居中、线铺满两端”的效果，是目前最轻量且兼容性好的方案。关键不在“怎么加线”，而在于“怎么让线不抢位、不溢出、不模糊”。
为什么不能只靠 border 或 background 直接画线
在 Flex 容器里给子元素加 border-right 会参与盒模型计算，干扰 flex-grow 的实际占比；用 background 填充整个子项又容易撑高容器或和文字重叠。更糟的是，如果文字换行，border 还会出现在行尾——这不是分割线，是 bug。
-
border改变元素尺寸，破坏justify-content: space-between的对齐预期 -
background需手动控制高度和位置，多行文本时无法自适应 - 纯 DOM 元素（如额外
<div class="line">）增加语义冗余，不利于维护
::before 和 ::after 必须设 flex: 1 而不是 flex-grow: 1
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，其中 flex-basis: 0 才是关键——它让伪元素从“零宽度”开始生长，真正把剩余空间均分。只写 flex-grow: 1 会保留默认 flex-basis: auto，导致两侧行为不一致，尤其在 Safari 中线长明显不对等。
- 正确写法：
.title::before, .title::after { content: ""; flex: 1; height: 1px; background: #e0e0e0; } - 错误写法：
flex-grow: 1单独使用，没重置flex-basis - 若需留空隙，用
margin（如margin-right: 8px），别用padding，否则影响 flex 分布
文字如何不被拉伸、不溢出、还能垂直居中
容器设 display: flex + align-items: center 后，文字本身不需要额外定位。但必须注意两点：一是文字不能是容器的直接文本节点（会触发匿名块，破坏 flex 子项逻辑），二是长文本必须截断或换行控制。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构要包裹一层
<span>：<div class="title"><span>我的文字</span></div> - 文字容器加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止撑破布局 - 若允许多行，改用
white-space: normal; word-break: break-word;，并确保父容器有明确height或max-height - 千万别给文字元素设
flex相关属性，它只是普通子项，不是“用来撑空间”的
高 DPI 屏幕下 1px 线变粗或发虚怎么办
iPhone、MacBook 等设备 DPR > 1 时，height: 1px + background 渲染出来其实是 2px，用 transform: scaleY(0.5) 又容易模糊。最稳的解法是换用 box-shadow 模拟单像素线。
- 推荐写法：
box-shadow: 1px 0 0 #e0e0e0;（右侧线）或box-shadow: -1px 0 0 #e0e0e0;（左侧线） - 避免
border-image或linear-gradient，它们在部分安卓 WebView 中渲染异常 - 如果必须用
background，可加媒体查询：@media (-webkit-min-device-pixel-ratio: 2) { ... height: 0.5px; }，但支持度有限，不如box-shadow可靠
真正容易被忽略的点是：伪元素必须和文字同级参与 flex 排列，且不能有任何隐式尺寸干扰；flex-basis: 0 是对齐前提，不是可选项；高 DPI 下的线质量，本质是渲染引擎问题，不是 CSS 写法问题——选对替代方案比硬调 transform 更有效。
