flex: 1在小屏下不等分的根本原因是浏览器优先满足子项最小内容尺寸（如长文本、padding），导致剩余空间为负或极小而失效；须显式设min-width: 0、white-space: nowrap、text-overflow: ellipsis，并将连线提升至容器级伪元素绘制。
小屏下步骤条错位、文字换行、连线断裂，根本不是“flex没生效”，而是内容反向劫持了弹性分配逻辑——必须从容器级控制状态、截断和连线，而不是靠子项各自为政。
为什么 flex: 1 在手机上完全不等分？
常见错误现象：PC端看着正常，一缩到手机屏，步骤宽度全凭字数撑开，有的宽得离谱，有的挤成一团；flex: 1 像没写一样。
真正原因是浏览器优先满足每个 .step 的最小内容尺寸（比如长文本、图标 padding、未设 min-width: 0），再把剩余空间分给 flex: 1 ——而小屏剩余空间常为负或极小，直接失效。
- 所有
.step必须显式声明min-width: 0和box-sizing: border-box - 文字强制单行：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 禁用子项内边距控制间距（如
margin-right），改用容器级padding留白 - 图标统一用
font-size+line-height控制，避免图片尺寸浮动
怎样让连线在小屏下不断、不偏、不重叠？
错误做法：每个 .step 用 ::after 画右侧短线，或靠 border-right 拉线 —— 小屏下首尾多线、中间断点、缩放后偏移严重。
立即学习“前端免费学习笔记（深入）”；
正确做法是把连线逻辑上提到容器级，用伪元素一次性绘制贯穿横线：
.steps {
position: relative;
}
.steps::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 2px;
background: #ddd;
z-index: 1;
}
.step {
position: relative;
flex: 1;
min-width: 0;
}
/* 圆点/数字定位上下文由 .step 提供，但连线不再依赖它 */
这样无论屏幕多窄，横线始终居中贯穿；需要隐藏首尾连线？不用删伪元素，直接让首项 background-color 盖住左侧、末项盖住右侧即可。
如何用 data-status 驱动小屏状态样式？
写一堆 class 如 class="step step-active step-done" 在移动端 JS 更新时极易漏掉某一项，且 CSS 权重混乱。小屏交互更敏感，状态必须原子化、可预测。
- 只允许三个值：
data-status="todo"、data-status="active"、data-status="done" - 所有视觉反馈基于属性选择器，例如：
[data-status="done"]::before { background: #06e; } - 小屏下圆点可放大、文字字号缩小、间距压缩，全部通过媒体查询叠加在属性规则上，不新增 class
- 避免用
:nth-child()控制状态色 —— 它和数据无关，响应式重排后会错位
最易被忽略的是：小屏下步骤条不该只是“缩放”，而要重构信息密度。比如把文字标签收进 tooltip，用 icon + 数字承载主信息，连线高度随字体缩小同步压缩 —— 这些都依赖容器级控制，而非对每个 .step 单独 hack。
