在网页布局开发中，双列交错排列且支持自动换行的需求十分常见，比如商品列表、图片墙等场景。使用Flex布局可以高效实现该效果，不需要复杂的计算或者额外的DOM嵌套，仅通过合理的属性配置就能完成需求。
核心实现思路
要实现双列交错排列并自动换行，核心是先设置Flex容器允许换行，然后为子元素设置合适的宽度，让每行只能容纳两个元素，同时通过nth-child选择器为奇偶位置的子元素设置不同的排列偏移，就能形成交错效果。
1. 容器基础配置
首先需要给父容器开启Flex布局，同时设置flex-wrap: wrap允许子元素自动换行，再通过justify-content属性控制子元素的水平对齐方式，这里可以根据需求选择space-between或者flex-start。
2. 子元素宽度设定
为了让每行只显示两个元素，需要给子元素设置宽度接近父容器宽度的50%，同时预留出间距的空间，避免两个元素宽度之和超过父容器宽度导致换行异常。
3. 交错效果实现
通过:nth-child(odd)和:nth-child(even)分别选中奇数和偶数位置的子元素，为它们设置不同的margin-top值，就能形成上下交错的效果，奇数项可以向下偏移，偶数项保持原位置，或者反过来配置。
完整代码示例
以下是完整的HTML和CSS实现代码，可直接复制到本地运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex双列交错排列示例</title>
<style>
/* 父容器样式 */
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
/* 子元素基础样式 */
.flex-item {
width: 48%;
height: 120px;
background-color: #409eff;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
border-radius: 4px;
margin-bottom: 20px;
}
/* 奇数项向下偏移20px，形成交错效果 */
.flex-item:nth-child(odd) {
margin-top: 20px;
}
/* 偶数项保持原位置 */
.flex-item:nth-child(even) {
margin-top: 0;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">数据项1</div>
<div class="flex-item">数据项2</div>
<div class="flex-item">数据项3</div>
<div class="flex-item">数据项4</div>
<div class="flex-item">数据项5</div>
<div class="flex-item">数据项6</div>
<div class="flex-item">数据项7</div>
<div class="flex-item">数据项8</div>
</div>
</body>
</html>
效果调整说明
如果需要调整交错的幅度，只需要修改nth-child(odd)选择器中margin-top的数值即可，数值越大交错效果越明显。如果需要反向交错，可以把margin-top设置给偶数项，奇数项保持0。
另外如果子元素内容高度不固定，也可以把margin-top替换为transform: translateY(20px)，这样不会影响文档流的正常排列，避免换行时出现多余的空白区域。
常见问题说明
- 如果子元素宽度设置超过50%，会导致每行只能放下一个元素，无法形成双列效果，需要根据间距大小合理调整宽度值。
- 如果父容器没有设置
flex-wrap: wrap，子元素会在一行内排列，不会自动换行，必须开启该属性。 - 如果页面需要适配移动端，可以把父容器的宽度改为100%，子元素宽度根据屏幕尺寸动态调整，比如使用
calc(50% - 10px)来计算宽度，适配不同屏幕的间距需求。
Flex布局双列交错排列自动换行css_flexbox修改时间：2026-07-01 07:36:14