flex-direction: column 适合垂直时间轴，但需设 align-items: flex-start 并用伪元素绝对定位圆点；优先用 gap 而非 justify-content: space-between；响应式需同步重置伪元素定位；ie11 应降级为 block 布局。
flex-direction: column 适合垂直时间轴，但要注意子项默认不占满高度
垂直时间轴最常用 flex-direction: column，但很多人发现时间点（如圆点）和内容块上下不对齐——根本原因是 flex 容器默认 align-items: stretch，而子项（.timeline-item）没设高度，导致 align-self 失效或位置漂移。
实操建议：
- 给容器加
align-items: flex-start，再用margin-left或transform控制圆点横向偏移，比依赖align-items: center更可控 - 每个
.timeline-item显式设置position: relative，圆点用::before伪元素 +position: absolute定位，避免受 flex 主轴/交叉轴影响 - 若需等高内容区（如左右图文交替），别靠
align-items: stretch，改用display: grid嵌套或 JS 补齐高度——flex 的“等高”只对直接子项生效，且无法跨 item 对齐内容底部
justify-content: space-between 在动态数据下容易错位，优先用 gap
用 justify-content: space-between 分隔时间点，看似简洁，但一旦某条数据的标题换行、描述变长，item 高度不一，间距就会失衡，顶部/底部留白突兀。
更稳的方案是弃用 justify-content，改用 gap：
-
gap: 1.5rem直接控制 item 间空隙，与内容高度无关 - 配合
margin-top调整首项顶部间距，尾项不用额外处理 - 旧浏览器兼容性差？用
margin-bottom替代：给每个.timeline-item:not(:last-child)加margin-bottom: 1.5rem
示例关键 CSS：
.timeline {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.timeline-item {
position: relative;
padding-left: 2rem;
}
.timeline-item::before {
content: "";
position: absolute;
left: 0;
top: 0.5rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #3b82f6;
}
响应式断点里别只改 flex-direction，要重置伪元素定位
水平时间轴（flex-direction: row）在桌面端看着好，但切到手机时若只简单改成 column，常出现圆点挤在左侧、文字缩成一团——因为 ::before 的 left/top 值没随方向重置。
必须同步调整伪元素定位逻辑：
- 横屏时圆点用
top: 50%; transform: translateY(-50%)居中对齐时间线 - 竖屏时改用
left: 0; top: 0.5rem，并确保父项padding-top留出空间 - 用
@container比@media更精准（如果父容器有container-type: inline-size），避免因页面整体宽度误触发断点
IE11 下 flex timeline 几乎必崩，fallback 方案不是加前缀
IE11 对 gap、align-items（尤其带 stretch）、伪元素在 flex 子项里的定位支持极差，加 -ms- 前缀解决不了根本问题。
真实可用的降级路径：
- 用
display: -ms-flexbox+ 手动计算-ms-flex-pack/-ms-flex-align，但仅限简单单列，且圆点必须用真实 DOM 元素而非伪元素 - 更推荐：检测
CSS.supports('display', 'flex')和CSS.supports('gap', '1rem')，不支持时切换为display: block+margin布局，并隐藏复杂装饰（如斜线连接线） - 时间线本质是语义化列表，IE 用户能看清时间、标题、内容就达标，动效和视觉对齐反而是次要的
真正麻烦的不是写法，而是伪元素定位 + flex + 响应式三者叠加后，在 Safari 14.1 或 Chrome 90 之前版本里仍存在渲染抖动——得加 will-change: transform 或用 translateZ(0) 强制 GPU 加速，这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
