display: flex 本身不是响应式方案，它仅使子元素具备弹性行为；真正的响应式需同时满足 @media 查询、flex-wrap、相对单位和 viewport 元标签四个条件。
直接说结论：display: flex 本身不是响应式方案，它只是让容器内子元素具备弹性行为；真正的响应式必须配合 @media 媒体查询、flex-wrap、相对单位和视口控制，缺一不可。
为什么只写 display: flex 不会自动响应式
Flex 容器默认是 flex-direction: row + flex-wrap: nowrap，所有子项强行挤在一行——小屏下直接溢出或横向滚动，完全没用。常见错误现象：手机上看导航栏文字重叠、卡片被压扁、侧边栏消失不见。
-
flex只管“怎么排”，不管“要不要换行”或“换几行” - 不设
flex-wrap: wrap，再小的屏幕也不会折行 - 不配
@media，就无法在不同宽度下切换flex-direction或调整flex-basis - 用
px写宽度（比如width: 200px）会卡死尺寸，破坏弹性
flex-wrap: wrap 是响应式弹性布局的开关
它是让 Flex 从“一维硬排”转向“自适应多行”的关键。没有它，flex 在小屏上基本等于失效。
- 搭配
flex: 1 1 300px：表示“最小宽 300px，可放大可缩小”，超出容器宽度就自动折行 - 避免写死
width: 33.33%—— 这样在 400px 宽度下三列会强制换行，但每列只剩 133px，内容可能撑破 - 更稳妥的写法：
flex: 0 0 calc(33.333% - 20px)（减去 margin），或直接用grid替代
媒体查询里只改关键属性，别重复写整套样式
很多人在 @media (max-width: 768px) 里把整个 .container 样式重写一遍，结果维护困难、容易漏掉更新。
- 只覆盖需要变的部分：比如把
flex-direction: row改成column，或把justify-content: space-between改成center - 优先用
min-width（移动优先）：@media (min-width: 768px)写平板以上规则，基础样式默认适配小屏 - 断点按内容定，不是按设备型号：比如某段标题在 680px 开始换行难看，那就设
@media (max-width: 680px)，而不是盲目套用 768
最容易被忽略的硬性前提：<meta name="viewport">
如果 HTML 的 里没这行，或者写了两次、加了 user-scalable=no、用了 width=1024，那所有 Flex 和媒体查询都会失效——浏览器根本不会按你写的宽度渲染，而是按 980px 默认缩放，导致断点错位、尺寸失真。
- 必须且只能写一次：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 必须放在
最开头，不能被 JS 或其他 meta 挡住 - 不要加
maximum-scale或user-scalable=no，除非有强无障碍合规要求
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
