本文介绍一种纯 css 方案，利用 :nth-child(4n+x) 选择器为 flex 子项动态分配 60%/40% 宽度，使每两列构成一行，并在相邻行间自动反转左右比例顺序，无需 javascript 或额外 html 结构。
本文介绍一种纯 css 方案，利用 :nth-child(4n+x) 选择器为 flex 子项动态分配 60%/40% 宽度，使每两列构成一行，并在相邻行间自动反转左右比例顺序，无需 javascript 或额外 html 结构。
在响应式布局中，有时需要实现“交错对齐”效果：例如每行固定显示两个项目，但第一行左宽右窄（60% / 40%），第二行则左窄右宽（40% / 60%），第三行再次复位为 60% / 40%，依此类推。这种模式常见于图文混排、卡片网格或画廊展示场景。
Flexbox 本身不支持“按行翻转 flex-direction”，也无法直接基于行号设置样式——因为 CSS 无“当前行索引”伪类。但我们可以借助子元素在文档流中的全局序号，结合周期性选择器（如 :nth-child(4n+1)）模拟行级交替逻辑。
关键思路是：每两列组成一行，因此每 4 个子元素构成两个完整行（即一个“交替周期”）。在这个周期内：
- 第 1 个和第 4 个元素 → 分配 60% 宽度（首行左 + 次行右）
- 第 2 个和第 3 个元素 → 分配 40% 宽度（首行右 + 次行左）
对应 CSS 如下：
.ImageContainer {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.ImageItem {
border: 1px solid #ccc;
height: 60px;
box-sizing: border-box; /* 确保边框不撑大宽度 */
}
/* 周期为4：每4个元素为一组，实现两行交替 */
.ImageItem:nth-child(4n+1),
.ImageItem:nth-child(4n+4) {
width: 60%;
}
.ImageItem:nth-child(4n+2),
.ImageItem:nth-child(4n+3) {
width: 40%;
}
✅ 为什么是 4n+x？
- 行 1：元素 1（60%）、元素 2（40%）
- 行 2：元素 3（40%）、元素 4（60%）
- 行 3：元素 5（60%）、元素 6（40%）→ 对应 4n+1（n=1 → 5）、4n+4（n=1 → 8，但此处为6，实际匹配 4×1+1=5 和 4×0+4=4；由于 4n+4 等价于 4(n+1)，即所有 4 的倍数位置）
因此该模式天然适配任意偶数个子项，且严格按“60-40 / 40-60”循环。
⚠️ 注意事项：
- 所有 .ImageItem 必须为 .ImageContainer 的直系子元素，嵌套层级变化将导致 nth-child 计算失效；
- 若需兼容旧版浏览器（如 IE10/11），4n+x 写法完全支持，但需避免使用 flex-gap（可改用 margin 模拟间距）；
- 当容器宽度不足以容纳两个子项时（如小屏幕），flex-wrap: wrap 会自然折行，此时交替逻辑仍按全局序号生效，视觉上可能表现为单列，建议配合媒体查询控制最小断点。
该方案简洁、高效、语义清晰，是纯 CSS 实现“逐行反向布局”的典型范例。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
