使用 flex-wrap 和 gap 可实现 Flex 布局中子元素的自动换行与均匀间距。1. 设置 flex-wrap: wrap; 允许子元素在空间不足时换行，避免溢出；2. 使用 gap 属性（如 gap: 16px）统一控制主轴与交叉轴间距，消除传统 margin 带来的对齐问题；3. 结合 flex: 1 1 200px 使子元素最小宽度为 200px 并可伸缩，实现响应式多行布局；4. 容器无需固定高度，内容自动撑开，适用于卡片、图库等场景；5. 注意 gap 在旧浏览器兼容性有限，可降级使用 margin。该组合提升布局效率与维护性。
在使用 CSS Flex 布局时，子元素的换行与间距控制是常见的布局需求。通过 flex-wrap 与 gap 的合理搭配，可以轻松实现美观、响应式的多行排列布局。
启用子元素换行：flex-wrap
默认情况下，Flex 容器中的子元素会尽量排在一行内。当内容超出容器宽度时，可能会导致溢出或压缩。为了解决这个问题，可以使用 flex-wrap 属性允许子元素换行。
常见取值：- nowrap：不换行（默认）
- wrap：向下换行，第一行在上方
- wrap-reverse：向上换行，第一行在下方
通常我们设置 flex-wrap: wrap; 来让子元素在空间不足时自动换行。
使用 gap 统一间距
传统方式中，我们常用 margin 控制子元素之间的间距，但在换行场景下容易出现边缘多余空白或最后一行对齐问题。而 gap 属性能更优雅地解决这类问题。
立即学习“前端免费学习笔记（深入）”；
gap 是网格和 Flex 布局中的标准间距属性，用于设置主轴和交叉轴上的间距。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 子项之间统一间隔 */
}
.item {
flex: 1 1 200px; /* 最小宽度约 200px，可伸缩 */
}
这样，所有子元素在横向和纵向都会保持 16px 的间距，无需额外处理 margin 或最后一行对齐。
响应式布局实践
结合 min-width 与 flex-grow，可以让子元素根据容器宽度自动调整数量每行显示数量。
实用技巧：- 设置 flex: 1 1 200px 表示子元素最小宽度 200px，可放大填充剩余空间
- 配合 gap 避免 margin 导致的外边距折叠或不对齐
- 容器无需设置高度，自动根据内容撑开
这种组合特别适合卡片列表、图库、商品展示等需要自适应断行的场景。
兼容性注意
gap 在 Flex 布局中的支持从大多数现代浏览器开始（Chrome 84+, Firefox 63+, Safari 14.1+）。若需支持较老浏览器，可降级使用 margin 配合计算，但推荐优先使用 gap 并辅以渐进增强策略。
基本上就这些。用好 flex-wrap 和 gap，能让 Flex 布局更简洁、灵活，减少 hack 写法，提升开发效率与维护性。
