用 flex-direction 比 float 更可靠，因 float 脱离文档流致塌陷和错位，flex 支持响应式方向切换且不破坏语义；实操需配合媒体查询、伪元素绘线、focus-within 交互及 viewport 设置。
时间轴在小屏上变成竖排，为什么用 flex-direction 比 float 更可靠
因为 float 会脱离文档流，导致父容器高度塌陷、点击区域错位，尤其在动态插入节点时容易出问题；flex 天然支持响应式方向切换，且不破坏语义结构。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 根容器设
display: flex，默认flex-direction: row（横轴） - 小屏断点用媒体查询改写为
flex-direction: column（竖轴） - 避免对子项单独设
float或position: absolute，否则会和flex冲突 - 如果时间轴内容含图片或 iframe，记得给
img加max-width: 100%，不然横轴下可能溢出
如何让时间轴的连接线（timeline bar）随方向自动对齐
横轴时线在顶部/中部，竖轴时要变到左侧/右侧——不能靠 JS 计算位置，得用 CSS 自适应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用伪元素
::before绘制连接线，而非额外 DOM 元素 - 横轴时：设
top: 50%+transform: translateY(-50%)居中 - 竖轴时：改用
left: 50%+transform: translateX(-50%)，并旋转rotate(90deg) - 注意：
transform在不同方向下需重置，否则竖排时线会歪斜或错位
移动端点击区域太小，:hover 效果失效怎么办
手机没有 hover 状态，纯靠 :hover 显示详情或高亮会完全不可用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把交互逻辑从
:hover迁移到:focus-within或显式.active类 - 为每个时间点项加
tabindex="0"，确保可键盘聚焦 - 用 JS 监听
click或touchstart切换.is-expanded类，再用 CSS 控制展开样式 - 别依赖
pointer-events: none隐藏连接线——它会让整个区域失焦，影响可访问性
@media (max-width: 768px) 为什么有时不生效
常见原因是页面没加 viewport meta 标签，或者媒体查询被更高优先级规则覆盖。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认
<meta name="viewport" content="width=device-width, initial-scale=1">已存在 - 检查是否用了
!important强制横轴样式，它会压过媒体查询里的声明 - 避免用
min-width和max-width混用同一断点，推荐统一用max-width做移动优先 - 真机调试时注意 iOS Safari 的缩放行为：如果用户双击放大过，
device-width可能被误判
最易被忽略的是连接线的旋转中心点——transform-origin 必须设成 center 或具体像素值，否则竖排时线会偏移出容器。另外，时间点文字如果用了 white-space: nowrap，小屏下会直接撑破布局，得配合 word-break: break-word 或 overflow-wrap: break-word。
