flex-wrap与media query结合可实现响应式布局。默认wrap允许换行，大屏通过min-width设nowrap并排，小屏自动堆叠，适用于导航、卡片、表单等场景，配合断点、flex属性和gap优化布局适应性。
在CSS中，flex-wrap 和 media query 结合使用可以实现灵活的响应式布局。通过控制弹性容器中的换行行为，并根据屏幕尺寸调整布局结构，能有效提升不同设备上的显示效果。
flex-wrap 的作用
flex-wrap 决定弹性项目是否换行以及如何换行。常用值包括：
- nowrap：所有项目排在一行（默认，可能溢出）
- wrap：允许换行，从上到下排列
- wrap-reverse：换行，但行顺序反向
在响应式设计中，通常在小屏幕上启用换行，避免内容被压缩或溢出容器。
结合 media query 调整布局
使用 @media 查询可以在不同屏幕宽度下动态改变 flex-wrap 的行为。例如：
立即学习“前端免费学习笔记（深入）”；
.container { display: flex; flex-wrap: wrap; /* 默认允许换行 */ }.item { flex: 1 1 200px; / 最小宽度约200px，自动伸缩 / }
/ 大屏幕：单行排列，多个项目并排 / @media (min-width: 768px) { .container { flex-wrap: nowrap; } }
这个例子中，大屏幕下项目不换行，并尽可能均匀分布；当屏幕小于768px时，恢复换行，项目堆叠成多行，更适合手机浏览。
实际应用场景
这种组合常用于以下场景：
- 导航菜单：桌面端横向排列，移动端换行或堆叠成垂直菜单
- 卡片布局：商品、文章列表在宽屏下多列展示，窄屏自动变为单列或多行
- 表单控件：输入框和按钮在小屏幕上上下排列，大屏则左右对齐
关键是设置合适的断点和 flex 属性，让内容自然流动。
优化建议
为了获得更好的响应效果：
- 使用 min-width 或 max-width 定义合理断点（如576px、768px、992px）
- 配合 flex-grow、flex-shrink 和 flex-basis 控制项目伸缩性
- 为容器设置 gap 来统一间距，避免用margin造成换行错位
基本上就这些，不复杂但容易忽略细节。灵活运用 flex-wrap 与 media query，能让布局真正“响应”用户环境。
