CSS项目实战之带图标的步骤进度条_Flex布局基础尝试

P粉602998670

发布时间：2026-02-18 11:01:02

201人浏览过

来源于php中文网

原创

用 flex 实现步骤条需父容器设 display: flex + justify-content: space-between，每个步骤项设 display: flex + flex-direction: column 并 align-items: center；图标用标签配 width/height 精确控制，进度线用伪元素动态填充，响应式下垂直排列并设 min-width: 0 防溢出。

css项目实战之带图标的步骤进度条_flex布局基础尝试

怎么用 Flex 实现步骤条的横向对齐和图标居中

Flex 是最直接可控的方式，不用浮动或 inline-block 那套容易错位的老办法。关键在 display: flex 和子项的 align-items: center，否则图标和文字会高低不一。

常见错误是只给容器加 flex，却忘了步骤项（.step）本身也要设 display: flex 才能让内部图标和文字垂直居中；另外父容器若没设 height 或 line-height，align-items: center 就没效果。

.steps 容器用 display: flex + justify-content: space-between 控制步骤间距
每个 .step 用 display: flex + flex-direction: column，图标在上、文字在下
图标用 margin-bottom: 8px 而不是 padding，避免影响 flex 基线对齐
别依赖 vertical-align —— 在 flex 里它基本失效

CSS 中图标用 background-image 还是标签

用 <img alt="CSS项目实战之带图标的步骤进度条_Flex布局基础尝试" > 更稳妥。background-image 虽然能缩放，但图标的语义性丢失，且无法通过伪元素动态换色；而 <img alt="CSS项目实战之带图标的步骤进度条_Flex布局基础尝试" > 可以配合 width/height 精确控制尺寸，也支持 loading="lazy"。

容易踩的坑是：用 background-image 时忘记设 background-size: contain，导致图标被拉伸；或者用 <img alt="CSS项目实战之带图标的步骤进度条_Flex布局基础尝试" > 时没加 alt=""，被屏幕阅读器读出文件名。

立即学习“前端免费学习笔记（深入）”；

Nimo.space

智能画布式AI工作台

下载

图标尺寸统一用 width: 24px; height: 24px;，不靠 background-size 适配
状态切换（如完成/进行中）优先用 class 切换 <img alt="CSS项目实战之带图标的步骤进度条_Flex布局基础尝试" > 的 src，而不是改 background-image
如果必须用 background-image，请确保路径正确，url(./icons/check.svg) 比 url(/icons/check.svg) 更少因构建工具路径解析出错

进度线怎么做到不随步骤数变化而断裂

进度线本质是一条横跨所有步骤的 ::after 伪元素，不能写死宽度，得靠 flex 的剩余空间自动填充。常见错误是给线单独加 div，结果响应式时位置漂移，或者用绝对定位硬算 left/right，一加新步骤就全乱。

真正靠谱的做法是让最后一个步骤之外的所有 .step 共享一条线：用 .steps::before 绘制主进度线，再用 .step:not(:last-child)::after 补每段间隙的小线段 —— 这样增减步骤完全不影响布局逻辑。

主进度线设 position: absolute; top: 12px; width: 100%; height: 2px;，父容器需 position: relative
小线段用 .step:not(:last-child)::after，content: "" + position: absolute + right: -50%; width: 100%
别用 border-bottom 模拟线 —— 它会受字体大小和行高干扰，尤其在移动端