用Flex布局实现H5步骤条横向自适应连接，核心是flex-direction:row、justify-content:space-between使节点等距分布，伪元素绘制连接线，gap或JS动态控制线长，小屏降级为column布局。
用 Flex 布局实现 H5 步骤条的横向自适应连接，核心是让所有步骤节点水平排布、等距分布、自动撑满容器宽度，同时连接线能随节点间距动态伸缩。关键不在“滚动”，而在“弹性对齐”和“视觉连通”。
容器设置：启用 Flex 并控制主轴方向
给步骤条外层容器设 display: flex，并明确主轴为水平方向（flex-direction: row，默认值可省略）。必须加 width: 100% 或固定宽度，否则 Flex 容器可能收缩不占满父级。
- 推荐加 justify-content: space-between 实现节点两端对齐、连线均匀分布；若需首尾对齐容器边缘，改用 space-around 或 space-evenly
- 加 align-items: center 垂直居中，确保图标、文字、连线在同一视觉基准线上
- 避免写 white-space: nowrap（那是滚动场景用的），这里不需要防换行
步骤项设置：统一尺寸 + 弹性间距
每个步骤节点（如 .step-item）建议采用固定宽高 + 圆形图标 + 文字组合结构。关键在于让连接线“自然生成”，而不是额外画一条线。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给每个 .step-item 设置 flex: 0 0 auto，防止被压缩或拉伸
- 节点内用相对定位或伪元素（::after）绘制右侧连接线：例如 position: relative 后，::after { content: ""; position: absolute; top: 50%; right: -20px; width: 20px; height: 2px; background: #ccc; transform: translateY(-50%); }
- 最后一个节点的 ::after 可设 display: none，避免多余短线
连接线自适应逻辑：靠间距驱动，不依赖 JS
真正实现“自适应连接”的不是线本身，而是节点之间的空白区域。当容器宽度变化时，justify-content: space-between 会自动重算节点间距，此时连接线（伪元素）的位置和长度虽固定，但视觉上仍保持“连通感”；若需连接线随间距伸缩，可改用线性渐变背景模拟：
- 在容器上叠加一层绝对定位的 div.line，高度 2px，背景用 linear-gradient 横向填充
- 通过 JS 动态计算首尾节点中心横坐标，设置 line 的 left 和 width（仅在 resize 或初始化时触发一次，开销极小）
- 更轻量的做法：用 Flex 容器的 gap 属性（现代浏览器支持）控制节点间距，再配合伪元素短线，视觉简洁且无需计算
响应式微调：适配小屏与文字折行
在手机窄屏下，步骤过多会导致拥挤。此时不强行压缩，而是降级为竖排或精简展示：
- 用媒体查询在 max-width: 480px 下切换 flex-direction: column，步骤垂直排列，连接线改为向下延伸
- 文字内容用 font-size: clamp(12px, 3vw, 16px) 自适应缩放，避免溢出
- 图标尺寸用 rem 或 em，确保与文字比例协调
