Flex时间线必须用flex-direction: column打底，避免小屏溢出；圆点需relative+absolute定位；响应式切换时要同步更新left/top偏移值；daisyUI的timeline-vertical基于Grid，结构要求严格。
Flex时间线必须用flex-direction: column打底
横向时间轴在小屏上会直接溢出，除非你明确打算只在桌面端用。垂直布局才是默认安全选择，所有主流实现（daisyUI、Bootstrap DIY、纯 CSS 方案）都默认走 flex-column。别被“横向更酷”带偏——先保证内容可读，再谈方向。
常见错误是直接套 display: flex 却漏写 flex-direction，结果在某些浏览器里 fallback 成 row，节点全挤在一行。务必显式声明：
section.timeline {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
-
gap比margin-bottom更可控，避免最后一个元素多出多余间距 - 别用
row-gap单独设——gap在 column 布局下自动生效为垂直间距 - 如果要兼容 IE11，得退回到
margin-bottom+:last-child { margin-bottom: 0 }
时间点圆标必须用position: relative包裹 + position: absolute定位
伪元素（::before）画圆点看似简洁，但一旦加 hover 动画或点击态，就容易和父容器的 transform 或 overflow 冲突。更稳的做法是：每个时间项用 position: relative，圆点作为子元素绝对定位。
典型结构：
立即学习“前端免费学习笔记（深入）”；
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<time>2026-09-20</time>
<p>上线新版文档系统</p>
</div>
</div>
-
.timeline-dot必须设position: absolute，且父级.timeline-item必须有position: relative - 水平对齐靠
left: -16px（避开内容区左缩进），垂直居中靠top: 50%; transform: translateY(-50%) - 别用
margin-left: -16px拉圆点——它会破坏 flex 的主轴对齐逻辑
响应式切换方向时，left/top 定位值必须重置
很多方案在 @media (min-width: 768px) 里切回横向布局，却忘了把圆点的 left: -16px 改成 top: -16px，导致圆点跑出容器顶部。这不是 bug，是定位逻辑没随方向同步更新。
推荐写法是用 CSS 自定义属性解耦：
.timeline-item {
--dot-offset: -16px;
}
.timeline-item::before {
left: var(--dot-offset);
}
@media (min-width: 768px) {
.timeline {
flex-direction: row;
}
.timeline-item {
--dot-offset: -16px;
}
.timeline-item::before {
top: var(--dot-offset);
left: auto;
}
}
- 横向布局下，圆点应沿时间线 y 轴对齐，所以用
top；垂直布局下用left - 别指望
transform: translateX(-50%)自动适配方向——它不感知布局流 - 如果项目用 Tailwind，建议封装两个工具类：
dot-left和dot-top，避免重复写媒体查询
daisyUI 的 timeline-vertical 不等于纯 Flex 实现
如果你已经引入 daisyUI，别自己再写 Flex 时间线——timeline-vertical 是基于 CSS Grid 实现的，自带连接线颜色控制、紧凑模式、图标吸附等能力。自己用 Flex 模仿，大概率会漏掉 timeline-snap-icon 这种细节，导致图标在滚动时“漂移”。
但要注意：daisyUI 的 timeline 要求结构严格为 <ul class="timeline timeline-vertical"><li>...</li></ul>，且每个 <li> 内必须含 timeline-start / timeline-middle / timeline-end 三类区块。直接往里面塞 div 会断样式。
- 想混用 Bootstrap 工具类？可以，但别给
<ul>加d-flex——Grid 和 Flex 会打架 -
timeline-compact在小屏下强制单侧排布，比手写媒体查询更省心 - 真要自定义连接线颜色？改
--tw-border-opacity不顶用，得覆盖.timeline::before的 background
.timeline-item 加 id 或 data-id，而不是等交互逻辑补上才回头改 DOM 结构。 
