复杂页面设计必须用display: grid控制外层骨架，因其支持行列协同、区域重排与跨格定位；内层对齐则优先用display: flex，适用于单向排列、垂直居中及动态内容适配。
复杂页面设计不是“选 Flex 还是 Grid”，而是「哪一层该用哪个」——外层骨架必须用 display: grid，内层对齐优先用 display: flex；混用不是妥协，是职责分层的必然结果。
哪些结构必须用 display: grid
当你需要同时控制行和列，且 HTML 结构不能为视觉顺序让步时，display: grid 不可替代。
- 页面级语义分区：比如
header/sidebar/main/footer，靠grid-template-areas: "header header" "sidebar main" "footer footer"一行定义，媒体查询里改字符串就能切换平板/手机布局 - 跨行跨列定位：某张数据卡片要占两行半列？写
grid-column: 2 / span 1; grid-row: 1 / span 2即可；Flex 只能靠position: absolute或嵌套 wrapper，脱离文档流、影响无障碍和打印 - 响应式列数自动适配：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))一行搞定，不用手写@media断点；Flex 要靠flex-wrap+ 多个min-width+calc()补位，易出横向滚动 - 侧边栏折叠动画：用
grid-template-columns: 0fr 1fr+transition，宽度归零但保留轨道，比 Flex 的width+max-width+overflow组合更可控、无重排抖动
哪些场景优先用 display: flex
所有「只沿一个方向排列、对齐、分布」的问题，display: flex 更轻、更稳、兼容性更好。
- 导航栏菜单、表单控件组、按钮堆叠：用
justify-content: space-between和align-items: center两行居中，Grid 在没设grid-template-columns时可能把所有子项塞进第一列，justify-content完全无效 - 卡片内部结构：标题+图片+操作按钮垂直堆叠？
flex-direction: column+gap就够了；子项高度不一致时，默认align-items: stretch自动等高，不用 hack - 动态增减内容：Flex 的
flex-wrap: wrap行为可预测；Grid 的grid-auto-flow: dense在子项尺寸不均时容易触发重排抖动 - 移动端折叠后撑满：直接给某项设
display: none，其余项自动占满剩余空间；Flex 不用改布局定义，Grid 得靠 JS 切类名或媒体查询改grid-template-columns
混用时最容易忽略的边界错误
属性写错层级，浏览器不报错也不渲染，但布局就失效——这是调试中最耗时间的坑。
- 在
grid容器上写justify-content：无效。它只作用于grid容器的轨道对齐，真正控制子项水平对齐的是justify-items或子项上的justify-self - 在
flex容器的子项上写grid-column或grid-row：浏览器直接忽略，不警告也不生效 -
height: 100%在 Flex 子项里失效：父容器没显式高度，继承链就断了；得改用min-height: 0或明确设height - Flex 嵌套超过 3 层（比如
.grid → .row → .col → .card-content）：视觉逻辑已超一维范畴，DOM 肥大、调试困难、重排开销明显上升；此时该抽离为独立grid区域
兼容性与性能的真实水位线
IE11 仍是部分项目绕不开的现实约束，而现代浏览器中性能差异其实远不如「维度错配」带来的维护成本高。
- IE11 只支持旧版
display: -ms-grid，不支持gap、auto-fit、grid-template-areas；但 Flex 的flex-grow、justify-content在 IE10+ 就稳定可用 - iOS Safari 14.0 之前，
grid-gap有偏移 bug；但flex-gap在 iOS 14.5+ 已稳定 - Grid 的
minmax()和auto-fit很强大，但复杂calc()表达式在滚动中可能触发频繁重算；Flex 的flex-basis设为auto或具体像素值，会干扰flex-grow的比例分配——真要等比伸缩，得设flex-basis: 0
真正容易被忽略的，不是“选哪个”，而是容器尺寸约束和溢出行为：无显式高度时，Flex 子项的 height: 100% 失效；Grid 的 minmax() 在滚动中可能触发频繁重算——这些细节不处理，再漂亮的布局也会在真实设备上翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
