外层结构用grid、内层对齐用flex是标准分层策略；flex适用于一维线性布局（如导航栏、卡片内部排列），grid适用于二维网格结构（如页面骨架、跨行列布局），二者混用覆盖99%场景。
Flex 和 Grid 不是“选一个”，而是“谁管哪一层”——外层结构用 grid，内层对齐用 flex，混用才是常态。
一维排列就别硬套 grid
导航栏、按钮组、表单控件左右配对、卡片内部标题+图片+按钮的垂直堆叠，这些全是单方向线性问题。用 grid 写 grid-template-columns: 1fr 1fr 1fr 去排三个导航项，等于拿扳手拧螺丝——语法冗余、语义错位、调试时容易漏掉 justify-items 和 justify-content 的冲突。
-
flex-direction: row+justify-content: space-between一行搞定两边对齐 -
flex-direction: column+margin-top: auto轻松实现底部固定按钮 -
flex-wrap: wrap配合flex-basis: 280px比grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))更轻量，尤其在子项动态增删时重排开销更低 - IE11 下
flex核心能力（justify-content、flex-grow）稳定可用；而grid的gap和auto-fit直接失效
二维结构必须上 grid
页面骨架级划分——比如 header / main / aside / footer 四区布局，或仪表盘里左菜单+右数据表格+底部状态栏，这种需要同时约束行高和列宽、允许跨行跨列、响应式时要整体切换区域顺序的场景，flex 嵌套三层以上就开始失控，grid 用 grid-template-areas 一行就能定义语义结构。
-
grid-column: 2 / span 2+grid-row: 1 / span 2直接让一个区块占两行半列，flex做不到 - 侧边栏从固定宽变为可折叠抽屉，
grid-template-columns: 0fr 1fr+transition比width+max-width+overflow组合更可控、无重绘抖动 - 媒体查询中只需改
grid-template-areas：桌面端"header header" "nav main" "footer footer"，手机端缩成"header" "nav" "main" "footer" -
grid容器内设justify-content是无效的——它只响应justify-items或justify-self，这点常被忽略
混用时的层级边界在哪
现代页面几乎都是 grid 划外层、flex 理内层：比如用 grid 把页面拆成 header、main、footer 三个区域，再在 header 里用 flex 水平居中 logo 和 nav，在 main 里用 flex 垂直堆叠标题与内容。但一旦你在某个 grid-area 里又套一层 grid，大概率是职责没分清。
- 在
grid子项里设display: flex完全合理；但若该子项内部再设display: grid，就要问：这个“内部网格”是否真需要独立行列控制？还是只是几个按钮水平排列？ -
gap在两者中行为一致，可复用；但align-items在flex中控制交叉轴，在grid中只影响单个格子内内容，不能跨格子对齐 - 超过两层
grid嵌套极易导致gap叠加错位、grid-column定位失效，调试时得逐层检查父容器是否显式设置了display: grid
真正容易被忽略的不是“该用哪个”，而是“谁该负责哪一段高度”。比如 flex 子项设 height: 100% 常失效——父容器没设 height，继承链就断了；此时该用 min-height: 0 或直接上 grid 控制轨道尺寸。布局决策最终落在 DOM 结构和样式责任的切分点上，而不是函数名或属性名的表面选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
