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，实际没生效
推荐写法：
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
}
@media (max-width: 768px) {
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
Flexbox 和 Grid 混用的关键边界在哪？
混用不是问题，问题是谁管结构、谁管对齐。Grid 负责划分“房间”，Flexbox 负责整理“房间里每张桌子怎么摆”。一旦越界，比如让 Flexbox 子项跨 Grid 区域，或用 Grid 去对齐按钮组内文字，就会触发不可预测的渲染行为。
典型分工：
-
.page→display: grid（定义 header/main/footer 区域） -
.main→display: grid（定义文章+推荐栏的左右比例） -
.card-grid→display: grid（控制卡片行列数，用repeat(auto-fit, minmax(280px, 1fr))） -
.card-actions→display: flex（右对齐两个按钮，用justify-content: flex-end） -
.form-group→display: flex（label 和 input 并排，align-items: center）
为什么你的响应式总在 iPad 断点失效？
iPad（尤其是带 Smart Keyboard 的型号）常以 1024px 宽度进入桌面样式，但 viewport 缩放、Safari 的“请求桌面版”开关、甚至系统字体缩放都会让 width 媒体查询失准。更可靠的方式是结合 min-resolution 和 hover 特性检测：
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
/* 真正的桌面交互设备 */
.sidebar { position: sticky; top: 1rem; }
}
@media (min-width: 768px) and (hover: none) and (pointer: coarse) {
/ 平板触屏模式，即使宽度够也禁用悬停效果 /
.nav-item:hover { background: transparent; }
}
另外，grid-template-areas 在 Safari 旧版本中不支持空格换行写法，必须写成单行字符串："header header" "sidebar main"，否则整个网格会退化为普通块级流。
最易被忽略的一点：Grid 的 gap 在 Flexbox 中没有直接等价物，如果混用，记得给 Flex 容器单独加 margin 模拟间隙，否则小屏下视觉节奏会突然变紧。
