Flex和Grid混用的核心是Grid管宏观结构、Flex管微观对齐：Grid定义“在哪”，Flex决定“怎么排”；混用时需分层响应、避免嵌套冲突、明确职责边界。
Flex 和 Grid 混用不是为了“炫技”，而是让布局逻辑更清晰、响应行为更可控。关键在于：Grid 管结构，Flex 管对齐；Grid 定义“在哪”，Flex 决定“怎么排”。
Grid 负责页面宏观区域划分
用 grid-template-areas 或 grid-template-columns/grid-template-rows 划出 header、main、sidebar、footer 这类固定语义区块，尤其适合需要跨行/跨列、比例分配（如 1fr 2fr）、或显式重叠的场景。
- 大屏下
grid-template-areas: "header header" "sidebar main" "footer footer"，侧边栏固定宽，主内容自适应 - 中屏用媒体查询切换为
"header header" "main main" "sidebar sidebar" "footer footer"，把侧边栏下移 - 小屏直接退化为单列：
"header" "main" "footer"，避免嵌套过深导致计算复杂
Flex 专用于组件内部一维排列
一旦进入某个 Grid 区域（比如 .main 或 .header），就该交由 Flex 处理子元素的动态分布——它不关心“第几行第几列”，只专注沿一个轴线伸缩、换行、对齐。
-
.header内部用justify-content: space-between分开 logo 和导航，align-items: center垂直居中 -
.card-list（在.main里）设display: flex; flex-wrap: wrap; gap: 16px，卡片数量变化时自动换行，比 Grid 的auto-fit更稳定 - 按钮组、表单项（label + input）、标签云这类“数量不确定+需对齐”的场景，一律优先
display: flex
混用时最常踩的三个坑
这些不是理论问题，是 DevTools 里一眼就能看到的渲染异常：
立即学习“前端免费学习笔记（深入）”；
- Grid 子项里再套 Grid，且用了
minmax(200px, 1fr)+auto-fit，结果小屏下突然溢出——本质是min-width: auto顶开了 Flex 的收缩逻辑，加flex-shrink: 0锁住宽度再套 Grid - IE11 下
grid-template-columns: repeat(auto-fit, ...)直接失效，整行塌成单列，必须用@supports (display: grid)做特性检测，外层回退到display: flex; flex-wrap: wrap -
align-items和align-content混用失效：前者作用于 Flex 项目在交叉轴的位置，后者只在 Grid 有多行轨道且容器有剩余空间时才对“轨道组”起作用——想让 Grid 里的内容居中，该用place-items: center
响应式切换别靠猜，要分层控制
媒体查询不该全写在顶层容器上。真正的分工是：
- Grid 层级负责“结构断点”：比如
@media (max-width: 768px)改grid-template-areas，把两栏变一栏 - Flex 层级负责“内容断点”：比如
@media (max-width: 480px)改.card-list的flex-direction: column，让卡片从横排变竖排 - 绝对不要在同一个选择器里同时改
display: grid和display: flex——浏览器会丢弃后声明的 display 值，造成不可预期的 fallback
真正难的不是写对代码，而是判断哪一层该由谁接管：Grid 的轨道定义一旦写死，就很难随内容弹性伸缩；Flex 的主轴方向一旦确定，就无法跨行对齐。边界划不清，后面所有响应式调整都会变成修修补补。
