flex更高效但仅适用于一维布局，grid在二维区域划分中不可替代；响应式卡片列表用flex-wrap更轻量，整页区域切换必须用grid-template-areas，混用时应在grid区域内用flex做子项对齐。
Flex 更高效——但只在它该出现的地方；Grid 在它该出现的地方，效率无可替代。关键不是“哪个更快”，而是“哪条路离目的地最近”。
响应式卡片列表用 flex-wrap 比 grid-template-columns 更轻量
当你要渲染几十个尺寸不一的卡片，并随容器宽度自动换行时，flex-wrap: wrap + gap 的重排开销远低于 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))。
- Flex 只需维护一维主轴顺序和尺寸，浏览器不用重新计算网格线、轨道映射和 gap 对齐坐标
- Grid 在频繁增删卡片（比如搜索过滤、无限滚动）时，会触发更重的 layout 计算，尤其在低端 Android Webview 或 Safari 15.6 中明显卡顿
-
gap在 Flex 中从 Chrome 104 起稳定支持，但 Firefox 95–100 对flex-direction: column+gap仍有漏距问题，需加margin降级兜底
整页区域切换必须用 grid-template-areas，否则维护成本爆炸
桌面端是 "header sidebar main aside footer"，平板变成 "header main aside footer"，手机端只剩 "header" "main" "footer" ——这种语义区域重排，靠 Flex 嵌套 + order + flex-direction 组合，三四个断点后 CSS 就不可读了。
- Grid 一行
grid-template-areas替换，HTML 结构完全不动，逻辑清晰可维护 - Flex 强撑二维结构时，常要为每个区域手动设
flex-basis、min-width、max-width，稍一改动就连锁错位 -
grid-column: 2 / span 1; grid-row: 1 / span 2这种跨格定位，Flex 根本没有对应能力，硬写 wrapper 嵌套只会让 DOM 和样式都变臃肿
别在 Grid 容器里写 justify-content，它不生效
很多人把 Flex 写习惯了，给 Grid 容器加 justify-content: center，结果居中失败还查不出原因——因为 Grid 的对齐体系是独立的。
- Grid 容器内有效的是
justify-items（控制所有子项）、justify-self（单个子项）、place-items（简写） - Flex 子项设
grid-column浏览器直接忽略；Grid 子项设flex-grow也无效——属性只在对应布局上下文中起作用 - 真正该混用的地方是：Grid 区域内，子项自己设
display: flex做内部对齐（比如 header 里 logo + nav + search 水平居中），而不是在外层 Grid 上堆 Flex 属性
最常被跳过的细节：移动端键盘弹出时，Safari 的 vh 会失真，导致 height: 100vh + Flex 垂直居中失效；而 Grid 的 grid-template-rows: 1fr 是轨道定义，不受视口动态缩放干扰——但这只在全屏弹层等少数场景才暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
