使用 flex-wrap 和 gap 可实现 Flexbox 布局中的自动换行与间距控制。1. 设置 flex-wrap: wrap 允许子元素在空间不足时换行，避免溢出；2. 使用 gap 统一设置子元素间的水平和垂直间距，简化样式管理；3. 建议结合 flex: 1 1 200px 等弹性设置与媒体查询优化响应式效果，避免混用 margin 防止间距混乱，提升布局效率与可维护性。
在使用 Flexbox 布局时，当子元素总宽度超过容器宽度，默认情况下它们会尝试挤在同一行。为了让子元素在超出容器时自动换行，并合理控制间距，可以结合 flex-wrap 与 gap 属性来实现更灵活、美观的布局。
1. 使用 flex-wrap 实现子元素换行
通过设置 flex-wrap: wrap，可以让子元素在空间不足时自动换行，避免溢出或压缩变形。
常用取值：- nowrap：默认值，不换行，所有子元素强制在一行显示
- wrap：允许换行，按从上到下的顺序排列新行
- wrap-reverse：换行但方向反转，新行出现在上方
示例代码：
container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
}2. 使用 gap 统一设置子元素间距
在 Flex 容器中，gap 属性可以轻松设置子元素之间的水平和垂直间距，无需额外使用 margin，避免外边距重叠或最后一行错位问题。
说明：- gap 同时适用于 flex 和 grid 布局
- 支持一个值（统一间距）或两个值（行间距 列间距）
示例：
container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 子项之间统一间距16px */
/* 或 */
gap: 16px 20px; /* 行间距16px，列间距20px */
}3. 实际布局建议与注意事项
为了构建响应式且结构清晰的 Flex 换行布局，可参考以下建议：
- 给子元素设置 flex: 1 1 最小宽度，例如
flex: 1 1 200px，让其在空间足够时扩展，空间不足时换行 - 配合媒体查询调整容器的 gap 或子元素最小宽度，提升移动端体验
- 避免同时使用 gap 和 margin，容易导致间距重复或计算混乱
- 注意老版本浏览器对 gap 的支持（IE 不支持，现代浏览器基本兼容）
示例完整结构：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
<p>.item {
flex: 1 1 200px;
background: #f0f0f0;
padding: 20px;
text-align: center;
}基本上就这些。用好 flex-wrap 和 gap，能让多行 Flex 布局更简洁、易维护，减少 hack 写法，提升开发效率。
