时间轴基本结构应以伪元素::before绘制垂直主线，容器设position: relative，.timeline-item用flex布局并结合:nth-child(odd/even)控制左右交替，图标用absolute+transform精准锚定线上，避免硬编码偏移。
时间轴的基本结构怎么搭才不翻车
Flexbox 做时间轴，核心是让时间点（.timeline-item）沿主轴等距或有序排列，但很多人一上来就给容器设 display: flex + flex-direction: column，结果发现左右不对称、时间线偏移、响应式下错位——问题出在没分清「时间线本体」和「内容区块」的层级关系。
正确做法是用一个伪元素（::before）画垂直主线，所有 .timeline-item 用 position: relative 定位到线上，再靠 flex 控制左右交替布局。这样主线不参与布局流，不会被内容撑开或挤压。
关键点：
- 容器设
position: relative，主线用::before绝对定位居中 - 每个
.timeline-item用display: flex，子元素（时间点图标、内容）用align-items: center对齐 - 奇偶项用
:nth-child(odd)/:nth-child(even)控制flex-direction: row或row-reverse，避免手动加 class
怎么让时间点图标始终卡在线上
图标（比如 .timeline-dot）如果直接放 flex 容器里，容易随文字高度浮动，导致视觉上“悬空”或“沉底”。它必须脱离文本流，且锚点精准对齐主线。
立即学习“前端免费学习笔记（深入）”；
推荐方案：把图标设为 position: absolute，左/右偏移固定值（如 left: 50%），再用 transform: translateX(-50%) 居中；同时主线宽度设为 2px，颜色用 currentColor 方便主题切换。
易踩坑：
- 用
margin-left: -10px这类硬编码偏移 → 换字体或缩放后错位 - 图标用
flex: 0 0 20px却没设align-self: center→ 在多行文本下不对齐 - 主线用
border-left而非伪元素 → 无法单独控制 z-index，会被内容遮挡
响应式断点下怎么保持左右交替逻辑不失效
小屏时左右交替反而造成阅读跳动，应该统一为单侧（比如全左）。但直接写 @media (max-width: 768px) { .timeline-item { flex-direction: row; } } 会覆盖掉原本的 odd/even 判断，导致所有项都朝同一方向挤。
正确解法是用媒体查询重置 flex-direction，同时取消伪类选择器的干扰：
@media (max-width: 768px) {
.timeline-item {
flex-direction: row;
}
.timeline-item::before {
display: none;
}
.timeline-line {
display: none;
}
}
注意：
- 别在媒体查询里重复写
:nth-child(odd)—— 小屏下不需要交替，写了反而增加 CSS 复杂度 - 移动端建议把主线隐藏，改用顶部 border 或底部 margin 模拟节奏感
- 如果用了
gap: 2rem，小屏要重设为gap: 1rem，否则间距过大割裂内容
IE11 兼容性要不要管？怎么低成本兜底
IE11 对 flex-wrap、gap、align-content 支持差，但时间轴本身结构简单，没必要整个降级为 float 布局。真正要处理的只有两处：
第一是 gap：用 margin 替代，比如给 .timeline-item:not(:first-child) 加 margin-top: 1.5rem；第二是 flex-direction: row-reverse，IE11 支持，但某些旧版本对 align-items: center 在 reverse 下计算有偏差，可加 min-height: 48px 防止塌陷。
务实建议：
- 主线伪元素用
background而非border，IE11 渲染更稳 - 图标用 SVG 内联而非字体图标，避免 IE11 字体加载失败变方块
- 如果项目明确不支持 IE11，就别加任何 hack —— 现在多数后台系统已无此负担
时间轴最难的不是排列，而是让时间点、主线、内容三者在缩放、换字体、多语言（比如中文/阿拉伯文混排）下依然对齐。动手前先在 Chrome 里调好 zoom: 110% 和 font-family: "Noto Sans CJK"，比写一堆兼容代码更管用。
