用 flex-basis 替代 flex-grow 实现带箭头的步骤条可避免缩放撕裂，因其提供确定像素基准，配合固定锚点与尺寸契约实现可控分配，而非自动适配。
直接说结论：用 flex-basis 替代 flex-grow 实现带箭头的步骤条，能避开动态缩放撕裂问题，但必须配合固定像素锚点和明确的尺寸契约——它不是“自动适配”，而是“可控分配”。
为什么 flex-basis 比 flex-grow 更适合箭头步骤条
箭头步骤条的核心矛盾是：箭头位置（如右边缘斜切、::after 伪元素偏移）依赖**确定的像素边界**，而 flex-grow 分配的是**比例剩余空间**，容器一缩放，箭头就错位。而 flex-basis 给每个步骤块一个“基准宽度”，后续伸缩逻辑清晰可预期，尤其适合多步中每步需保留固定图标区、文字区、箭头衔接区的场景。
-
flex-basis: 120px表示该步骤块初始占 120px，不随父容器变宽而被动拉伸 - 当所有步骤
flex-basis总和小于容器宽度时，剩余空间可由flex-grow: 1均分（但此时仅用于填充间隙，不参与箭头定位） - 当总和超过容器宽度，
flex-shrink会按比例压缩，只要各步收缩系数一致，箭头咬合关系仍可维持
如何用 flex-basis 控制带箭头的单步宽度
关键在于把“箭头”视为步骤块自身的一部分，而非附加装饰。比如一个步骤包含图标、文字、右侧箭头，整个块应有统一 flex-basis，箭头用 clip-path 或 border 在块内绘制，而不是靠相邻块拼接。
- 给每个步骤项设
flex: 0 1 160px（即flex-grow: 0; flex-shrink: 1; flex-basis: 160px） - 箭头用
::after绘制，并设position: absolute; right: -12px; width: 24px; height: 24px;，其中-12px是固定偏移，与flex-basis数值对齐 - 禁用
white-space: nowrap，否则长文字会撑爆flex-basis，导致布局断裂 - 若需响应式缩放，统一用
scale()包裹整个步骤条容器，而非单独调每个flex-basis
多步箭头衔接时 flex-basis 的常见坑
多步下，相邻步骤的箭头要“咬合”（如左步右箭头紧贴右步左边缘），这时不能只靠 flex-basis，还得控制盒模型细节。
- 所有步骤必须使用相同
box-sizing: border-box，否则padding和border会干扰flex-basis计算 - 避免混用
width和flex-basis：一旦写了width: 100%，flex-basis就被忽略 - 如果某步需要突出（如当前步骤加宽），不要改
flex-basis，而是用transform: scaleX(1.2)+z-index叠层，避免影响其他步骤的空间分配 - IE11 不支持
flex-basis的百分比值，必须用px或em
什么时候该放弃 flex-basis 改用 Grid
当步骤数动态变化、箭头方向不统一（如有的向右、有的向下）、或需跨步连接（如跳转线绕过中间步骤）时，flex-basis 就力不从心了。
- Flex 是一维线性模型，无法天然表达“第3步箭头指向第5步”这种非邻接关系
- Grid 可以用
grid-template-areas显式定义每个步骤和箭头的位置，clip-path箭头也能用inset()或polygon()精确锚定到网格线 - 真正复杂的进度条，往往需要把“步骤”和“连线”拆成两层：Grid 定位步骤块，绝对定位画连接线——这时
flex-basis已退居为内部排版工具，不再主导整体结构
复杂点在于，箭头不是附着在进度条上的“贴纸”，而是步骤块视觉边界的自然延伸；你得先定义好每个块的像素级边界契约，flex-basis 才能成为可靠的分配依据，而不是又一个飘忽的弹性变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
