用 flex 实现图标+标题+连线的水平布局，核心是三段式弹性分配：图标固定宽且不缩放，标题占满中间可变区域（flex: 1），连线用真实元素设 flex: 1 + border-bottom 自适应拉伸；伪元素画线易因换行或宽度变化失效，真实 DOM 更稳定可靠。
用 flex 实现图标+标题+连线的水平布局
一行内固定图标、动态长度标题、剩余空间画线，本质是「三段式弹性分配」，flex 是最直接解法。不用 float 或 table，也不推荐纯 position 模拟——维护成本高、响应性差。
关键在把连线做成一个自适应拉伸的元素，而不是靠边框或伪元素硬撑：
-
display: flex容器设为align-items: center垂直居中 - 图标用固定
width+flex-shrink: 0防压缩 - 标题用
flex: 1占满中间可变区域（注意：不是flex: auto） - 连线用空
<div> 或 <code><span></span>，设flex: 1+border-bottom为什么不能只靠
::after伪元素画线伪元素画线看似简洁，但容易在标题过长换行、容器宽度突变时失效——它依附于标题元素，无法独立占据剩余空间。一旦标题文字撑开容器，连线就可能错位或截断。
常见错误现象：
title内容加长后，::after的width: 100%变成相对标题自身宽度，而非剩余空间；或者用right: 0定位，结果被父容器overflow: hidden切掉。立即学习“前端免费学习笔记（深入）”；
实操建议：
- 坚持用真实 DOM 元素承载连线，确保 flex 布局能准确计算剩余空间
- 若必须用伪元素，得配合
position: absolute+left/right精确锚定，但需父容器设position: relative且无overflow: hidden - 移动端缩放或字体加载延迟时，伪元素常出现“闪动错位”，真实元素更稳定
border-bottom连线的样式与兼容性细节连线不是装饰线，是功能视觉引导，所以线型、粗细、颜色都要可控。用
border-bottom最稳妥，比background-image或linear-gradient兼容性好，也比height+background更易垂直对齐。参数差异和坑点：
- 别设
height，直接用border-bottom: 1px solid #ccc，高度由line-height和padding控制 - 如果图标和标题高度不一致，
align-items: center可能让连线偏高/偏低——此时给连线元素加margin-top: -0.5px微调（非必需，先看默认效果） - IE11 对
flex: 1在某些嵌套场景下计算异常，可改用flex: 1 1 0显式声明 - 避免给连线元素设
min-width，否则破坏“剩余空间”语义
响应式下标题溢出时的处理策略
当容器变窄，标题文字可能撑破布局。这时不能让连线消失或图标错位，而要优先保图标+连线结构，柔性截断标题。
实操建议：
- 给标题元素加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 确保标题父容器（即
flex: 1的那个）没设min-width，否则 ellipsis 不触发 - 不要给图标或连线设
flex-basis百分比值，它们必须保持绝对尺寸或零基础宽度 - 如果设计允许，可在小屏下隐藏连线（
@media (max-width: 480px) { .line { display: none; } }），比强行压缩更自然
最易被忽略的是：当标题用了
font-feature-settings或变量字体，ch或em宽度计算会浮动，此时text-overflow: ellipsis可能多截或少截一个字——这种场景下，宁可用 JS 动态截断，也别依赖纯 CSS。
