用 flex 布局让步骤项等宽需设容器 display: flex、width: 100%，子项 flex: 1 0 0 并防溢出；连接线由容器统一控制，伪元素定位用 left/right/top/bottom 约束；状态用 data-status + css 变量驱动；响应式竖排时需重置伪元素方向、间距及对齐方式。
如何用 flex 布局让步骤项等宽且自动撑满容器
直接设 flex: 1 给每个步骤项，看起来能均分，但实际会因内容长度不同导致宽度不一致——flex 默认有 min-width: auto，文字撑开就破功。
正确做法是显式关闭收缩行为：
- 给步骤容器加
display: flex和width: 100% - 每个步骤项设
flex: 1 0 0（即flex-grow: 1,flex-shrink: 0,flex-basis: 0） - 确保子元素（如图标、文字）不溢出，必要时加
overflow: hidden或white-space: nowrap
用 ::before 和 ::after 画连接线的边界条件
伪元素画线看似简单，但容易在缩放、高DPI屏或动态增删步骤时断连——根本原因是伪元素定位依赖父元素尺寸，而步骤项本身没固定高度/位置锚点。
稳妥方案是把连接线“上移一层”，统一由容器控制：
- 步骤容器设
position: relative，再用::before绘制贯穿整行的横线 - 每个步骤项用
::after在右侧画小竖线（仅当非最后一项时），配合position: absolute+right: -16px定位 - 避免对伪元素设
width，改用left/right+top/bottom约束，兼容 flex 动态宽度
状态样式（active / done / pending）怎么靠 CSS 变量驱动
硬写三套 class（如 .step--done）会导致 HTML 耦合严重，一改样式就得动结构；用 JS 切 class 又增加维护成本。
更轻量的做法是只传一个 data-status 属性，全靠 CSS 变量接管：
- 步骤项写
data-status="done"，CSS 里用属性选择器匹配：[data-status="done"] - 关键状态色、图标、连线样式全部走
var(--step-color)，在根或组件级统一定义变量值 - 注意：IE 不支持 CSS 变量，若需兼容，得 fallback 到
:root里写死值，或改用预处理器变量
响应式断点下步骤条折叠成垂直排列的陷阱
很多人在媒体查询里直接切 flex-direction: column，结果发现连接线方向没变、图标错位、间距爆炸——因为横排时的伪元素定位逻辑完全不适用于竖排。
垂直布局必须重置连接线逻辑：
- 竖排时，把原用于横线的
::before改为画**纵向线**（height: 100%，top: 0，left: 50%） - 每个步骤项的
::after改成画**下方小横线**（bottom: -16px），并仅对非末项生效 - 务必重设
align-items和justify-content，否则图标和文字在竖排时会挤到一侧
最常被忽略的是：竖排后步骤项之间的垂直间距，不能只靠 margin-bottom，得用 gap 配合 flex-direction: column，否则最后一项多出多余空白
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
