Flex适合一维线性布局，Grid适合二维网格结构；二者应分层使用：Grid划分外层区域，Flex处理内部对齐；混淆职责会导致布局失效。
Flex适合“一行或一列”的对齐与分布
当你面对的是线性排列问题——比如导航栏菜单、表单控件左右配对、卡片内标题+图片+按钮的垂直堆叠，display: flex 是最直接的选择。它不预设轨道数量，子项数量增减不影响布局结构，flex-wrap: wrap 加 gap 就能撑起响应式卡片流。
常见翻车点：
-
align-content对单行 flex 容器无效，误以为它能控制多行间距 -
flex-basis设为auto或具体像素值时，会干扰flex-grow的比例分配；真要等比伸缩，得设flex-basis: 0 -
height: 100%在 flex 子项里常失效——父容器没显式高度，继承就断了；改用min-height: 0或明确设height
Grid必须用于“同时控制行列”的结构定义
页面骨架级需求绕不开 display: grid：比如桌面端五区（header / sidebar / main / aside / footer）、平板变三区、手机端垂直堆叠，这时 grid-template-areas 配合媒体查询一行就能切换语义结构，@media (max-width: 768px) { .container { grid-template-areas: "header" "main" "footer"; } } 比嵌套三层 flex 清晰得多。
典型不可替代场景：
立即学习“前端免费学习笔记（深入）”；
- 某区块需跨两行又占半列：
grid-column: 2 / span 1+grid-row: 1 / span 2直接定位 - 侧边栏从固定宽过渡为可折叠抽屉：
grid-template-columns: 0fr 1fr+transition比width+max-width+overflow组合更可控 - 响应式列数自动适配：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))一行搞定，不用写一堆@media
二者混用不是妥协，而是分层职责
现代响应式页面几乎从不二选一，而是按层级分工：grid 做外层区域划分（header/main/footer），每个区域内再用 flex 处理细节对齐（如 header 里的 logo + nav + search 水平居中）。
容易忽略的边界：
- 在
grid容器里给子项又设display: flex是合理操作；但若子项内部又套一层display: grid，大概率是层级职责没分清 -
grid容器内设justify-content是无效的——它只响应justify-items或justify-self；同理，flex子项设grid-column浏览器直接忽略 - Flex 嵌套超过 3 层时，视觉逻辑已超一维范畴，重排开销明显上升，此时该考虑抽离为独立
grid区域
兼容性与性能的真实水位线
IE11 仍是现实约束：它只支持旧版 display: -ms-grid，不支持 gap、subgrid、auto-fit，实际项目中几乎不可用；而 flex 的核心能力（flex-grow、justify-content）在 IE10+ 就稳定可用。
性能差异其实极小：
- Grid 的二维计算开销略高于 flex，但实测差异在千分之一秒级
- 真正卡顿往往来自未节流的
resize监听，或未设will-change: transform - iOS 9 Safari 对
grid-gap有偏移 bug，但flex-gap在 iOS 14.5+ 已稳定
复杂点不在语法本身，而在判断“当前这个容器，到底该承担结构职责，还是内容对齐职责”——一旦混淆，后续所有 hack 都是徒劳。
