Flexbox适合一维布局对齐，如导航栏、卡片列表；Grid才适合页面整体二维结构布局，二者应分工明确：Grid划“房间”，Flexbox整“桌椅”。
Flexbox 适合什么场景？别硬套在整页布局上
Flexbox 的核心价值是一维布局对齐，比如导航栏、卡片列表、表单控件排列。它不擅长处理“行+列交叉控制”的复杂二维结构。很多人一上来就用 display: flex 包裹整个 body，结果发现侧边栏高度不一致、断点切换时子项错乱、flex-wrap 和 flex-basis 冲突频繁。
实操建议：
- 只对有明确主轴方向且子项逻辑相关的容器启用 Flexbox（如
.header-nav、.product-list） - 避免嵌套超过两层
display: flex，否则计算逻辑难追踪 - 移动端优先时，用
flex-direction: column替代反复重写grid-template-rows - 慎用
flex: 1——它依赖父容器高度，而多数响应式容器高度是auto，容易导致内容塌陷
Grid 才是页面骨架的正确选择
用 display: grid 定义整体结构（页眉、主区、侧栏、页脚），再用 grid-template-areas 或 grid-template-columns 控制区域划分。它的响应能力来自 minmax() + fr + 媒体查询，而不是靠 JS 或重复写断点类名。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
grid-template-columns: 200px 1fr 300px，但没配grid-template-areas，导致grid-area失效 - 在小屏下仍保留三列定义，只是把中间列设为
1fr，结果侧栏被压缩到看不见 - 用
grid-column: 1 / -1强制全宽，却忘了父容器本身没设grid-template-columns，实际没生效
推荐写法：
