用flex实现首尾固定、中间自适应的面包屑布局，关键在于首尾项设flex: 0 0 auto且宽高固定，中间容器设flex: 1并加min-width: 0，内部再嵌套元素设置white-space: nowrap和text-overflow: ellipsis。
Flex实现首尾固定、中间自适应的面包屑布局
直接说结论：用 flex 做这种面包屑，关键不是靠 flex-grow 或 flex-shrink 撑开中间项，而是让首尾项「不伸缩」、中间容器「强制占满剩余空间」——否则在文字长度变化或缩放时容易错位或溢出。
为什么 flex: 0 0 auto 必须加在首尾元素上
默认情况下，flex 容器里的子元素会尝试收缩（flex-shrink: 1），一旦中间内容变长，首尾图标或文字就可能被压缩变形，尤其在小屏或缩放后明显。
- 首尾项（如首页图标、右箭头）应设为
flex: 0 0 auto—— 不放大、不缩小、按内容宽 - 中间容器（包裹所有
<span>的那个<div>）设为flex: 1，它才真正响应剩余空间 - 千万别给中间项本身设
flex: 1，否则每个<span>都抢空间，层级乱了
white-space: nowrap 和 overflow: hidden 的组合陷阱
面包屑常需要单行显示+省略号，但 Flex 下这两者配合有坑：如果父容器没设 min-width: 0，子元素的 white-space: nowrap 会让整个 flex 容器拒绝收缩，导致布局撑破容器。
- 必须在中间容器（即
flex: 1的那个元素）上加min-width: 0 - 再在里面套一层
<div class="breadcrumb-inner">，对它设white-space: nowrap和overflow: hidden - 否则省略号（
text-overflow: ellipsis）根本不会生效
兼容性与字体渲染带来的宽度偏差
Chrome 和 Safari 对 flex: 1 的剩余空间计算略有差异，加上中文字体（如 PingFang、Noto Sans CJK）的度量值不稳定，会导致中间区域实际宽度浮动 ±1px，进而让末尾箭头轻微偏移。
立即学习“前端免费学习笔记（深入）”；
- 给首尾项统一设
width: 24px（或具体像素值），比flex: 0 0 auto更稳 - 避免用
em或rem控制首尾尺寸，字体缩放时易失准 - 如果支持 IE11，必须补
flex-basis: 0到中间容器，否则flex: 1不生效
最麻烦的其实是「中间自适应」这个说法本身——它不是自动发生的，而是靠首尾锁死 + 中间容器主动声明占位 + 内部再做截断控制。漏掉任意一环，面包屑就会在窄屏、缩放、多语言切换时突然崩掉。
