flex-wrap控制子元素换行，gap设置间距。使用flex-wrap:wrap允许换行，gap定义行列间距，二者结合实现响应式布局。例如.card-group中设置flex-wrap:wrap和gap:16px，配合flex:1 1 200px使卡片在不同屏幕下自动换行并保持一致间距，提升布局灵活性与可维护性。
在使用 CSS Flexbox 布局时，flex-wrap 和 gap 是控制子元素换行与间距的两个关键属性。它们配合使用可以让布局更灵活、更美观，尤其适用于响应式设计。
flex-wrap 控制是否换行
默认情况下，Flex 容器中的子元素会尝试在一行内排列。当容器空间不足时，子元素会被压缩。通过 flex-wrap 可以改变这一行为，允许子元素换行显示。
常用取值：- nowrap：不换行（默认值）
- wrap：向下换行，第一行在上方
- wrap-reverse：向上换行，第一行在下方
例如，让子项在空间不足时自动换行：
css
.container {
display: flex;
flex-wrap: wrap;
}
gap 设置子元素之间的间距
gap 属性可以为 Flex 容器内的子元素之间设置统一的间距，包括行间距和列间距，无需再使用 margin 调整空白，避免外边距塌陷或计算复杂的问题。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 行与列的间距都是 16px */
}
也可以分别设置：
.container {
gap: 10px 20px; /* 行间距 10px，列间距 20px */
}
实际应用建议
在做卡片布局、标签组或网格类组件时，推荐同时启用 flex-wrap: wrap 和设置合适的 gap，这样在不同屏幕尺寸下都能保持良好视觉效果。
示例场景：响应式卡片列表
.card-group {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 200px; / 最小宽度约 200px，可伸缩 /
background: #f0f0f0;
padding: 16px;
border-radius: 4px;
}
这样每张卡片最小 200px，超出容器就自动换行，且间距一致，代码简洁易维护。
基本上就这些，合理使用 flex-wrap 与 gap 能大幅提升布局效率。
