设置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换行布局：
立即学习“前端免费学习笔记（深入）”；
电子手机配件网站源码1.0
下载
电子手机配件网站源码是一个响应式的织梦网站模板，软件兼容主流浏览器，且可以在PC端和手机端中进行浏览。模板包含安装说明，并包含测试数据。本模板基于DEDECms 5.7 UTF-8设计，需要GBK版本的请自己转换。模板安装方法：1、下载最新的织梦dedecms5.7 UTF-8版本。2、解压下载的织梦安装包，得到docs和uploads两个文件夹，请将uploads里面的所有文件和文件夹上传到你的
.container {
display: flex;
flex-wrap: wrap; /* 关键：允许换行 */
gap: 16px; /* 子项间距 */
}
.item {
flex: 1 1 200px; / 最小宽度约200px时换行 /
}
说明：
- flex: 1 1 200px 表示每个子项可以伸缩，且最小宽度为200px。当容器宽度不足以容纳所有子项时，就会触发换行。
- gap 设置子元素之间的间距，比用margin更方便。
配合媒体查询优化响应效果
你也可以结合媒体查询进一步控制不同屏幕下的行为：
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 100%; / 默认占满一行 /
}
@media (min-width: 600px) {
.item {
flex: 1 1 45%; / 中等屏幕两列 /
}
}
@media (min-width: 900px) {
.item {
flex: 1 1 30%; / 大屏三列或更多 /
}
}
注意事项
确保父容器有足够的样式支持换行效果：
- 必须设置 display: flex
- 推荐使用 flex-wrap: wrap
- 合理设置子元素的 min-width 或 flex-basis 来控制换行时机
- 避免给子元素设置固定宽度（如 width: 200px），而应使用 flex 相关属性实现弹性
基本上就这些，灵活运用 flex-wrap 和 flex 属性就能实现良好的响应式换行布局。
