关键在“在哪加”和“怎么收口”：需限定flex容器于语义明确的父子级内，每组协同响应元素应独立包裹；必须显式设flex-wrap: wrap以支持换行，优先用flex-basis+flex-grow替代width控制伸缩。
直接用 display: flex 就能快速搭出响应式布局，但关键不在“加不加”，而在“在哪加”和“怎么收口”。错一层嵌套、漏一个 flex-wrap，或者在不该设 width 的地方硬写死值，布局立刻在小屏上崩。
必须把 flex 容器限定在语义明确的父子级内
常见错误是把所有要并排的元素（比如 .main 和 .sidebar）直接丢进同一个父级，然后靠 justify-content 强拉位置。这会导致：小屏下无法自然换行、子项宽度计算冲突、align-items 失效。
正确做法是——每组需要协同响应的元素，必须包裹在独立容器中：
-
.report-section包住文字说明 + 图表容器，这个容器设display: flex -
.nav-wrapper包住 logo + 菜单项 + 登录按钮，这个容器设display: flex - 不要让
.header和.main同时作为 flex 项目出现在同一个父容器里——它们属于不同层级的结构单元
flex-wrap: wrap 是自动换行的开关，不是可选项
很多人只写 display: flex，以为“响应式”就完成了。结果一缩浏览器宽度，项目直接溢出或重叠。根本原因是默认 flex-wrap: nowrap，强制所有子项挤在同一行。
只要子项可能换行（比如卡片列表、导航项、图文组合），就必须显式声明：
-
flex-wrap: wrap：换行，新行从上往下堆 -
flex-wrap: wrap-reverse：换行，新行从下往上堆（适合倒序展示场景） - 搭配
justify-content: space-between或space-around才能让换行后每行内部也均匀分布
子项别乱设 width，优先用 flex-basis + flex-grow 控制伸缩
写 width: 300px 或 width: 50% 给 flex 子项，等于主动放弃弹性。尤其当父容器宽度变化时，固定宽会撑破布局或留白失控。
推荐组合用法：
-
flex: 0 1 280px：不放大（flex-grow: 0），可缩小（flex-shrink: 1），基础宽 280px（flex-basis）——适合卡片类最小宽度保障 -
flex: 1：等价于flex: 1 1 0，均分剩余空间，适合侧边栏/主内容区比例分配 - 避免同时设
width和flex-basis，后者会覆盖前者
移动端断点只需改 flex-direction，别重复写媒体查询
很多教程教你在 @media (max-width: 768px) 里重写整个 flex 结构，其实多数时候只需要一行：
- 大屏横向导航：
.nav-wrapper { flex-direction: row; } - 小屏垂直折叠：
@media (max-width: 768px) { .nav-wrapper { flex-direction: column; } } - 同理，图文左右结构 → 小屏上下结构，只改
flex-direction: column即可，不用动 HTML 或重写对齐方式
真正难的不是写对那几行 CSS，而是判断哪些容器该设 flex、哪些子项该交出尺寸控制权。一旦把 flex-basis 和 flex-wrap 混用，或者在媒体查询里反复覆盖 justify-content，布局就会进入“调一点，崩一片”的状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
