订单状态时间轴需垂直居左对齐：一、设flex-direction: column与flex-wrap: wrap并限定容器宽度；二、用align-content: flex-start实现整体左对齐；三、各节点内用align-items: center和text-align: left保证图文垂直居中且文字左对齐；四、圆点与文字同容器，竖线用left: 0绝对定位。
订单状态时间轴垂直居左对齐，关键不是“垂直居中”，而是让每个状态节点严格沿左侧对齐、纵向堆叠、不漂移、不换行错位。这需要明确主轴方向、控制单行/多行对齐逻辑，并配合容器尺寸约束。
一、先定主轴：用 column + flex-wrap 实现纵向时间轴
时间轴是自上而下排列的，所以主轴必须是垂直方向：
- 设容器 display: flex 且 flex-direction: column
- 加 flex-wrap: wrap —— 看似多余，实则必要：它让后续 align-content 生效（只有多行时该属性才起作用）
- 给容器设定明确的 width（如
width: 300px），否则 flex 容器宽度自适应，align-content 无法稳定控制“列整体”的位置
二、左对齐靠 align-content，不是 justify-content
很多人误用 justify-content: flex-start 想实现左对齐，但它只控制主轴（这里是垂直方向）上的分布，对“水平位置”无效。真正管左右对齐的是交叉轴对齐，而交叉轴此时是水平方向：
- 由于是
flex-direction: column，交叉轴变为水平方向 - 又因启用了
flex-wrap: wrap，状态项可能形成“多行”（实际是多列视觉效果），此时应使用 align-content: flex-start - 这个设置会让所有“行”（即每条时间线节点）整体紧贴容器左侧，不右偏、不居中
三、每个状态节点内部文字左对齐 + 垂直居中
节点容器（如每个 .status-item）本身需保证内容排布清晰：
- 设 display: flex + align-items: center（交叉轴居中 → 垂直居中图标与文字）
- 文字部分用 text-align: left 或 align-self: flex-start 避免继承居中
- 避免给节点设
width: 100%或flex: 1，否则会撑满并破坏左对齐节奏
四、补充细节：时间点与连接线的处理
典型时间轴含圆点（.dot）、竖线（.line）、文字（.label）。要保持整体左对齐，建议结构扁平化：
- 把
.dot和.label放在同一 flex 容器内，.line单独作为伪元素或绝对定位元素，锚定在容器左侧 - 若用伪元素画竖线，推荐
::before绝对定位 +left: 0，并确保父容器position: relative - 所有子元素不设
margin-left: auto或justify-content: center类样式，防止无意右推
