Flexbox适用于一维布局如导航栏、卡片列表，不适用于复杂二维网格；Grid的fr单位分配剩余空间，非视口宽度；二者协作应避免直接切换display，需结合HTML结构与@supports降级。
Flexbox 什么时候该用，什么时候别硬上
Flexbox 适合一维布局（单行或单列），比如导航栏、卡片列表、表单对齐；它不是万能的，强行用 flex 做复杂二维网格（比如带行列对齐+跨格+响应断点的仪表盘）会写一堆 flex-wrap + min-width + calc() 补丁，维护成本陡增。
常见错误现象：flex: 1 在嵌套容器里失效、flex-direction: column 下子项高度不占满、移动端按钮错位——多数是父容器没设 height 或忘了 min-height: 0 触发 flex 项收缩异常。
- 用
display: flex前，确认父容器有明确尺寸约束（比如height: 100vh或max-height），否则子项的flex: 1可能无意义 - 子项含图片或文本时，加
min-width: 0/min-height: 0防止内容溢出破坏布局 - 响应式切换方向（
row→column）优先用媒体查询改flex-direction，而不是重写整个结构
Grid 布局中 fr 单位和 auto 的实际表现差异
fr 是“剩余空间分配单位”，不是固定像素；auto 是内容撑开，但受 minmax() 和 grid-template-columns 中其他轨道影响。很多人以为 1fr 2fr 就是 1:2 等分容器宽，其实前提是没其他固定宽度轨道抢占空间。
典型翻车场景：在 grid-template-columns: 80px 1fr 2fr 中，1fr 和 2fr 分的是「减去 80px 后的剩余宽度」，不是全宽的 1/3 和 2/3；如果内容超长，auto 轨道还会撑大整行，导致其他轨道被压缩。
立即学习“前端免费学习笔记（深入）”；
- 用
fr前先想清楚“剩余空间”到底指什么——是容器内减去所有非fr轨道后的宽度，不是视口宽度 - 避免混用
fr和auto在同一行，除非你明确控制了minmax(0, max-content)这类限制 - 响应式中推荐用
repeat(auto-fit, minmax(300px, 1fr)))替代手写多组1fr 1fr 1fr，它能自动根据容器宽度填入合适列数
Flexbox 和 Grid 在媒体查询里的协作陷阱
直接在同一个元素上反复切换 display: flex ↔ display: grid 容易引发渲染抖动，尤其在 Safari 上；更糟的是，某些旧版 Android WebView 对 grid 的媒体查询支持不一致，@media (max-width: 768px) 里切回 flex 可能被忽略。
使用场景：PC 端用 Grid 做三栏主内容+侧边栏，移动端需要堆叠+隐藏部分区域——这不是单纯换 display，而是语义结构变化。
- 不要只靠 CSS 切换 display，把关键结构差异（如侧边栏是否插入主内容流）用 HTML 类名控制，CSS 只负责样式适配
- Grid 的
grid-template-areas在媒体查询中可完整重写，比 Flexbox 的 order 属性更直观，但注意 IE 不支持 - 如果必须降级，用
@supports (display: grid)包裹 Grid 规则，内部 fallback 写 Flexbox，别反过来
移动端 touch 设备上 gap 的兼容性现实
gap 在 Flexbox 中 iOS Safari 14.5+ 才完全支持，在 Android Chrome 84+ 稳定，但老版本会直接忽略；Grid 的 gap 支持稍好，不过 Android 4.4 WebView 仍不认。
错误现象：卡片列表在 iPhone 上紧贴在一起，调试发现 gap: 16px 没生效，检查 computed style 显示为 gap: normal ——这就是不支持的信号。
- Flexbox 中替代方案：用
margin（但首尾需额外处理），或包裹一层伪元素清除间隙 - Grid 中可用
padding+grid-column-gap/grid-row-gap（旧语法，兼容性更好） - 真要保底，写两遍：
gap: 16px和grid-column-gap: 16px; grid-row-gap: 16px，现代浏览器会覆盖旧属性
真正难的不是写出响应式代码，而是判断某个布局问题到底该归因于容器尺寸缺失、内容溢出、单位理解偏差，还是浏览器实现差异——这些边界情况，往往只在真机横竖屏切换三次后才暴露出来。
