本文介绍如何通过 :nth-child(4n+x) 伪类选择器，配合 flexbox 的 flex-wrap，在不改变 html 结构的前提下，让每行两个子项的宽度比例（60%/40%）逐行交替反转。
本文介绍如何通过 :nth-child(4n+x) 伪类选择器，配合 flexbox 的 flex-wrap，在不改变 html 结构的前提下，让每行两个子项的宽度比例（60%/40%）逐行交替反转。
在响应式图文布局中，常需实现“错落有致”的视觉节奏——例如首行左宽右窄（60%/40%），次行则左窄右宽（40%/60%），以此循环。纯 Flexbox 本身不支持“按行翻转主轴方向”，但可通过精准的 CSS 选择器逻辑模拟该效果。
核心思路是：将每两行为一个周期（共 4 个元素），利用 4n+1 和 4n+4 匹配每组中的第 1 和第 4 个元素（即每行的“左侧”位置），统一设为 width: 60%；而 4n+2 和 4n+3 则对应每行的“右侧”位置，设为 width: 40%。这样既保持每行总宽 100%，又自然形成行间交替：
.ImageContainer {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.ImageItem {
border: 1px solid #ccc;
height: 60px;
box-sizing: border-box; /* 确保边框不撑大宽度 */
}
/* 每 4 个元素为一组：第 1、4 个 → 宽度 60%（行首/行尾“主位”） */
.ImageItem:nth-child(4n+1),
.ImageItem:nth-child(4n+4) {
width: 60%;
}
/* 第 2、3 个 → 宽度 40%（行中“辅位”） */
.ImageItem:nth-child(4n+2),
.ImageItem:nth-child(4n+3) {
width: 40%;
}
HTML 结构保持简洁，无需额外包裹行容器：
<div class="ImageContainer"> <div class="ImageItem">1</div> <div class="ImageItem">2</div> <div class="ImageItem">3</div> <div class="ImageItem">4</div> <div class="ImageItem">5</div> <div class="ImageItem">6</div> <!-- 更多元素自动延续模式 --> </div>
✅ 效果验证（6 项示例）：
- 第 1 行：1（4n+1 → 60%）、2（4n+2 → 40%）→ 60%/40%
- 第 2 行：3（4n+3 → 40%）、4（4n+4 → 60%）→ 40%/60%
- 第 3 行：5（4n+1 → 60%）、6（4n+2 → 40%）→ 60%/40%
⚠️ 注意事项：
- 此方案依赖固定两列布局，若需适配移动端单列，建议结合媒体查询重置为 flex-direction: column 或 width: 100%；
- 元素总数非 4 的倍数时（如 6、10 项），模式仍正确延续，无需额外处理；
- 避免与 order 属性混用，否则可能干扰 nth-child 的索引计算；
- 若需支持 IE11，请注意 4n+4 等写法兼容性良好，但建议测试实际渲染。
该方法轻量、语义清晰，是纯 CSS 实现“行级交替布局”的典型实践，兼顾可维护性与性能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
