用 align-self 实现奇偶项左右交替：奇数项设 flex-start，偶数项设 flex-end；竖线用容器 ::before，圆点用项目 ::after；小屏时媒体查询统一设 center；动态渲染改用数据索引而非 :nth-child。
flex-direction: column 时如何让奇偶项左右交替？
垂直时间线的交替排列，本质是让 flex-direction: column 下的子项在主轴（纵向）保持顺序，但在交叉轴（横向）按索引奇偶切换对齐方式。不能靠 justify-content 解决——它只控制整体容器内所有项目的统一对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个时间点项目（如
.timeline-item）加一个序号类，比如.timeline-item:nth-child(odd)和.timeline-item:nth-child(even) - 对奇数项设
align-self: flex-start，偶数项设align-self: flex-end，这样它们在交叉轴上就自然分列左右 - 别用
margin-left/margin-right模拟——响应式下容易错位，且与 flex 的对齐逻辑冲突 - 注意：
:nth-child是按 DOM 顺序计数，不是按 JS 渲染后顺序；如果中间插了非项目元素（如分隔线、空 div），序号会偏移
为什么用 ::before 画连接线比绝对定位更稳？
很多实现用 position: absolute 在容器里画竖线，结果一加 transform 或滚动就断开、错位。真正靠谱的是用伪元素 + flex 布局自身特性来承载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把竖线放在容器（如
.timeline）的::before上，设height: 100%、width: 2px、background: #ccc - 给每个
.timeline-item内部的圆点（时间标记）用position: relative，再用::after画小圆，避免依赖外部定位上下文 - 这样竖线高度随容器内容自动撑开，不需 JS 计算高度，也不怕父级有
overflow: hidden - 兼容性注意：IE11 支持
::before，但不支持align-self在flex-direction: column下对flex-start/flex-end的完整响应，需加-ms-flex-item-align
移动端折叠时怎么让时间线变单列不重叠？
交替排列在宽屏看着舒服，但小屏下左右挤在一起，文字重叠、点击热区打架。不能简单隐藏一边，得主动收束。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询在
max-width: 768px时重置align-self：全部设为center，同时取消左右偏移 - 把原本左右分布的圆点统一移到左侧或右侧（比如全用
align-self: flex-start），再配合text-align: left统一内容对齐 - 慎用
flex-wrap: wrap——垂直时间线主轴是 column，wrap对它无效；想“换行”只能切回 row 布局，那就不是时间线了 - 测试点：iOS Safari 在横屏切回竖屏时可能不触发重绘，加
min-height: 1px到容器可缓解
React/Vue 中动态渲染时 class 序号错乱怎么办？
:nth-child 看的是 HTML 结构顺序，不是数据数组索引。列表用 v-for 或 {items.map()} 渲染时，若中间有 v-if 或条件过滤，DOM 节点数 ≠ 数据项数，odd/even 就会错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃
:nth-child，改用数据驱动 class：比如className={`timeline-item ${index % 2 === 0 ? 'left' : 'right'}`} - Vue 中用
:class动态绑定，React 中用模板字符串或clsx库 - 如果用了虚拟滚动（如
react-window），必须确保 index 是真实渲染序号，不是原始数组索引——要传入itemData中计算好的位置 - 错误现象示例：
TypeError: Cannot read property 'alignSelf' of undefined通常不是 CSS 问题，而是 JS 渲染漏掉了某一项导致后续 class 错位
交替排列看着只是左右挪动，但真正在意交互细节、屏幕缩放和动态数据时，align-self 的取值时机、伪元素的依附层级、以及序号来源是否可信，才是卡住进度的地方。
