设置flex-wrap: wrap可实现子元素换行。父容器设display: flex和flex-wrap: wrap，子项用flex: 1 1 200px定义最小宽度，空间不足时自动换行，配合gap和媒体查询优化响应效果。
在CSS中，当使用Flex布局时，如果希望子元素在响应式场景下能够换行显示，关键在于设置父容器的 flex-wrap 属性。
启用换行：使用 flex-wrap
默认情况下，flex容器中的子元素会排在一行（或一列）内，超出也不会换行。为了让子元素在空间不足时自动换行，需要将父容器的 flex-wrap 设置为 wrap。
- flex-wrap: nowrap — 不换行（默认）
- flex-wrap: wrap — 允许换行，新行在下方
- flex-wrap: wrap-reverse — 换行但反向排列
通常响应式布局中使用 wrap 即可。
基本代码示例
以下是一个典型的响应式flex换行布局：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap; /* 关键：允许换行 */
gap: 16px; /* 子项间距 */
}
<p>.item {
flex: 1 1 200px; /<em> 最小宽度约200px时换行 </em>/
}</p>说明：
- flex: 1 1 200px 表示每个子项可以伸缩，且最小宽度为200px。当容器宽度不足以容纳所有子项时，就会触发换行。
- gap 设置子元素之间的间距，比用margin更方便。
配合媒体查询优化响应效果
你也可以结合媒体查询进一步控制不同屏幕下的行为：
.container {
display: flex;
flex-wrap: wrap;
}
<p>.item {
flex: 1 1 100%; /<em> 默认占满一行 </em>/
}</p><p>@media (min-width: 600px) {
.item {
flex: 1 1 45%; /<em> 中等屏幕两列 </em>/
}
}</p><p>@media (min-width: 900px) {
.item {
flex: 1 1 30%; /<em> 大屏三列或更多 </em>/
}
}</p>注意事项
确保父容器有足够的样式支持换行效果：
- 必须设置 display: flex
- 推荐使用 flex-wrap: wrap
- 合理设置子元素的 min-width 或 flex-basis 来控制换行时机
- 避免给子元素设置固定宽度（如 width: 200px），而应使用 flex 相关属性实现弹性
基本上就这些，灵活运用 flex-wrap 和 flex 属性就能实现良好的响应式换行布局。
