justify-content 无法实现左右交替布局，因为它是父容器属性，作用于整行子项，不能按单个子项分别控制对齐；必须改用 flex-direction: column 配合 align-self 和 :nth-child() 实现逐项左右切换。
直接说结论：用 flex-direction: column + :nth-child(odd)/:nth-child(even) 控制左右对齐，再配合伪元素画线和节点，就能实现时间轴左右交替布局，不需要 JS，也不用额外 wrapper。
为什么不能只靠 justify-content 实现左右交替
很多人试过给每个 .timeline-item 单独设 justify-content: flex-start 或 flex-end，但没效果——因为 justify-content 是容器属性，不是子项属性。子项自己没法决定在主轴上怎么对齐，只能由父容器统一控制。
- 父容器设
display: flex且flex-direction: row时，所有子项默认左对齐，justify-content才生效，但它作用于整行，无法按 item 分别控制 - 想让第1个左、第2个右、第3个左……必须换思路：把每个 item 变成独立 flex 容器，或让父容器是 column，再用
align-self - 更稳妥的做法是：父容器
flex-direction: column，每个 item 内部用display: flex，再用align-self: flex-start/flex-end控制单侧对齐
用 align-self + nth-child 实现逐项左右切换
核心是让每个时间点（.timeline-item）在 column 主轴上独立决定靠左还是靠右。这靠 align-self，它允许单个子项覆盖父容器的 align-items 设置。
- 父容器设
display: flex; flex-direction: column; align-items: center;（先居中，作为基准） - 奇数项：
.timeline-item:nth-child(odd) { align-self: flex-start; }→ 左对齐 - 偶数项：
.timeline-item:nth-child(even) { align-self: flex-end; }→ 右对齐 - 注意：必须给父容器设明确宽度（如
width: 100%），否则flex-start/flex-end会以内容宽度为参考，看起来像没动
连接线怎么不偏移、不打断交替节奏
主线（vertical line）如果用 ::before 绝对定位在父容器上，很容易和左右交替错位——因为 item 水平位置变了，但伪元素还锚定在容器中心。
- 正确做法：主线不画在父容器上，而是画在每个
.timeline-item内部，用position: relative+::before向上延伸 - 例如：给每个 item 设
position: relative; padding-left: 40px;（左对齐项），padding-right: 40px;（右对齐项），然后::before从对应侧画垂直线 - 或者更简单：主线仍画在父容器，但用
left: 50%+transform: translateX(-50%)居中，再给每个 item 的内容区域加margin-left: auto或margin-right: auto推开，避免文字压线
响应式下左右交替容易失效的坑
小屏时，左右交替失去意义，通常要改成单列堆叠。但很多人只加媒体查询改 flex-direction，忘了重置 align-self。
- 在
@media (max-width: 768px)里，除了设flex-direction: column，还得加.timeline-item { align-self: stretch; }，否则奇偶项还会固执地挤在左右边缘 -
align-self: stretch会让 item 填满父容器宽度，这是小屏下的合理行为 - 如果用了伪元素画节点（比如
::after圆点），也要同步调整其left/right值，否则圆点会跑出可视区
真正麻烦的不是写几行 CSS，而是当 item 内容高度不一致时，左右交替会导致视觉节奏断裂——比如左边一个长段落顶到右边短标题的中间。这时候得加 min-height 或用 grid 配合 flex 做基线对齐，但那就是另一层复杂度了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
