小屏单列堆叠、大屏左右对称需切换布局模型：小屏用 flex-direction: column 或 grid-auto-flow: row，大屏用 grid-template-columns: 1fr 1fr 或双 flex 容器，配合 grid-column/order 或 js 奇偶分配，并通过 grid-auto-rows/min-height 保障视觉平衡。
时间轴在小屏必须单列堆叠，大屏才能左右对称——这不是靠 text-align 或 justify-content 调整就能解决的，核心是布局模型切换：小屏用 flex-direction: column，大屏改用 grid 或双 flex 容器分置左右项，并用 order 控制视觉顺序。
为什么不能只用 justify-content: center 切左右对称
加了 justify-content: center 却没效果，大概率是父容器没设 display: flex；就算加了，也容易导致时间项错位——因为子项用了 position: absolute 脱离了 flex 流，或者 flex-wrap: wrap 没关，项数一多就自动换行。左右对称不是“居中”，而是让奇数项（如第1、3、5条）落在左列、偶数项（第2、4、6条）落在右列，这需要显式列分配，不是对齐能搞定的。
- 左右对称本质是两列网格或双 flex 容器，不是单容器内的对齐问题
-
justify-content只影响主轴方向上的分布，不改变项的归属列 - 若时间项高度差异大，仅靠 flex 无法保证左右视觉平衡，需配合
grid-auto-rows或固定行高
用 grid-template-columns + order 实现左右分栏
小屏单列靠 grid-auto-flow: row，大屏切两列并控制左右落点，关键在 grid-column 和 order 配合。HTML 结构保持时间先后顺序不变，CSS 仅负责视觉分栏。
- 父容器设
display: grid，小屏下grid-template-columns: 1fr - 大屏用
@media (min-width: 768px)改为grid-template-columns: 1fr 1fr - 每条时间项统一包裹在
<div class="timeline-item"> 内，内部拆出 <code><time></time>和<div class="content"> <li>第1、3、5…项加 <code>grid-column: 1，第2、4、6…项加grid-column: 2 - 为避免内容高度不均导致错位，设
grid-auto-rows: minmax(120px, auto) - HTML 中不手动拆分左右，而是用
data-index="1"标记顺序，JS 在加载时按奇偶插入对应容器 - 左右容器设
display: flex; flex-direction: column; gap: 1.5rem - 大屏下外层容器用
display: flex; gap: 3rem并排两个子容器 - 小屏用
@media (max-width: 767px)把右容器order: 2，确保语义顺序仍是左→右→左→右…的自然流 - 注意：不要用
float或position: absolute模拟，会破坏可访问性和打印样式 - 圆点统一用
::before，设content: ""+width: 12px+height: 12px+border-radius: 50% - 小屏下圆点用
position: absolute; left: 0; top: 50%; transform: translateY(-50%) - 大屏下改用
margin-right: 24px; align-self: center，让它随 flex 主轴自动居中 - 竖线不用每项画一条，而是在外层容器上用
::after+linear-gradient(to bottom, #ccc, #ccc)绘制，高度设height: 100%+position: relative父容器 - 禁止写死
height: 500px，否则响应后竖线截断；用min-height: 60vh或撑满内容高度
用两个 flex 容器模拟左右对称（兼容老浏览器）
如果项目需支持 IE 或某些旧版 WebView，grid 不可用，可退回到双 flex 容器方案：一个放左列项，一个放右列项，用 JS 或后端按序分配 DOM 节点，CSS 只控制容器并排。
连接线与圆点如何响应式对齐不漂移
左右对称时间轴最易翻车的是竖线断开、圆点偏移——因为很多人用 top: 200px 这类固定值定位，一换屏幕就失效。真正可控的方式是把圆点和线交给容器尺寸驱动，而不是像素偏移。
左右对称时间轴最难调的不是布局，而是当某条内容特别长（比如带图片+三段文字）时，左右列高度严重不一致，导致视觉失衡。这时候别硬调 height，优先用 grid-auto-rows 或给项加 min-height，再辅以 line-clamp 控制文本溢出——布局要服从内容，而不是反过来压内容适配布局。
