响应式时间轴需小屏单列左对齐、大屏水平居中，核心是用flex布局切换主轴方向并配合伪元素、相对定位与padding扩热区，避免order错乱和固定偏移导致的错位。
时间轴在小屏上左对齐、大屏上居中对齐，怎么用媒体查询控制
直接改 text-align 或 justify-content 不行——时间轴通常靠伪元素（::before）画竖线、靠绝对定位放圆点，对齐方式得从布局根上动。核心是：小屏用单列流式布局（flex-direction: column），大屏切为水平主轴居中（flex-direction: row + justify-content: center），再配合 margin 和 transform 微调圆点位置。
常见错误现象：justify-content: center 加了但没效果，是因为父容器没设 display: flex；或者加了却导致时间项错位，其实是子项用了 position: absolute 脱离了 flex 流。
- 小屏（
@media (max-width: 768px)）：设flex-direction: column，时间项width: 100%，圆点用margin-left: -12px拉回左侧对齐 - 大屏（
@media (min-width: 769px)）：切flex-direction: row，整体容器加justify-content: center，每个时间项加flex: 0 0 auto防止拉伸 - 竖线高度别写死，用
height: 100%+ 父容器position: relative，否则响应后断开
用 ::before 和 ::after 画响应式竖线和圆点，为什么不能只靠 top/left
因为 top/left 是固定像素偏移，在不同屏幕宽度下圆点会漂移。必须把定位基准和尺寸都换成相对单位或 flex 行为驱动。
使用场景：你希望圆点始终贴在时间项左侧（小屏）或上下居中（大屏），竖线贯穿所有时间项。
立即学习“前端免费学习笔记（深入）”；
- 圆点统一用
::before，设content: ""+width: 16px+height: 16px+border-radius: 50% - 小屏下：圆点
position: absolute+left: 0+top: 50%+transform: translateY(-50%) - 大屏下：圆点改用
margin-right: 24px+align-self: center，让它随 flex 主轴自动居中 - 竖线用
::after在最外层容器上画，height: 100%+width: 2px+background: #ccc，避免每项重复渲染
flex 布局下时间项顺序错乱，怎么保证语义顺序和视觉顺序一致
Flex 的 order 属性容易让人误用，尤其想“把第3项提到最前”时随手加 order: -1，结果小屏下顺序全乱——屏幕阅读器仍按 HTML 顺序读，但视觉上跳着走，可访问性直接崩。
性能影响：滥用 order 会让浏览器重排更频繁，尤其时间项多于10条时，滚动卡顿明显。
- 永远保持 HTML 中的时间项按时间先后顺序书写，这是唯一可信的顺序源
- 视觉调整只通过
margin、transform或flex-direction实现，不碰order - 如果真需倒序展示（比如最新在最上），用 JS 动态反转 DOM 节点，或后端返数据时就按需排序，CSS 不负责逻辑翻转
移动端点击区域太小，时间点文字又不能放大太多，怎么安全扩大热区
直接给 font-size 加大？小屏上立刻撑破容器。正确做法是分离“内容尺寸”和“交互尺寸”——用 padding 扩热区，再用 line-height 控制文字垂直居中，不改变盒模型视觉占比。
容易踩的坑：padding 加在时间项容器上，但忘了子元素（比如标题、日期）有 margin，导致实际热区边缘留白过大；或者用了 touch-action: manipulation 却没配 cursor: pointer，PC 端鼠标悬停无反馈。
- 时间项容器加
padding: 16px 20px，文字本身保持font-size: 14px - 内部标题用
margin: 0，日期用margin-top: 4px精确控距 - 加
cursor: pointer和touch-action: manipulation，iOS Safari 点击延迟降为 0
