一维布局用flexbox，二维布局用grid；flex适合单向排列与响应式换行，grid适合行列交织的复杂结构；实际项目应按内容流向、结构耦合度及嵌套容忍度决策。
直接看布局维度：一维用 display: flex，二维用 display: grid。不是“哪个更好”，而是“你要控制几个方向”。
判断是否需要同时控制行和列
如果元素位置必须由“第几行第几列”决定，或者要跨行跨列、重叠堆叠、固定区域划分（比如侧边栏+主内容+广告位），display: grid 是唯一靠谱的选择。Flexbox 在这种场景下会不断嵌套、加 wrapper、用绝对定位补位，最终变成维护噩梦。
- 常见错误现象：
flex-direction: column套flex-direction: row模拟三栏两行，结果卡片高度不一时，每行底边错位，justify-content对不同行无效 - Grid 的
grid-template-areas可以在不同断点间语义不变地重排结构，比如桌面五区 → 平板三区 → 手机单列，只改一行 CSS - Flexbox 无法让一个子项横跨整行又保持其他项对齐；Grid 用
grid-column: 1 / -1一行解决
判断是否只是单向排列或对齐
导航栏水平排开、按钮组垂直居中、表单控件左右对齐、卡片列表换行堆叠——这些全是 display: flex 的天然主场。它不预设轨道数，内容增减自动适应，flex-wrap: wrap 和 flex: 1 配合得非常干净。
- 常见错误现象：给
flex子项写height: 100%失效，因为父容器没显式高度；应改用min-height: 0或显式设height - 子项高度不一致但需等高？
align-items: stretch默认生效，不用 JS 或 hack - 移动端隐藏侧边栏？直接对某项设
display: none，其余项自动撑满，无需调整布局定义
Grid 和 Flexbox 实际怎么嵌套用
现代项目里几乎从不二选一，而是分层协作：外层用 Grid 划区域，内层用 Flex 排内容。混淆根源往往是没想清楚“你现在是在搭承重墙，还是摆家具”。
立即学习“前端免费学习笔记（深入）”；
- 页面骨架：
.page-layout { display: grid; grid-template-areas: "header header" "main aside"; } - 导航内部：
.main-nav { display: flex; gap: 16px; align-items: center; } - 卡片组件：
.card { display: grid; grid-template-columns: auto 1fr; gap: 8px; }定义图文位置，再用 Flex 排按钮组 - 避免陷阱：不要在 Grid 容器里为对齐问题硬加一层 Flex；先确认是不是该用
justify-items或place-self
兼容性和性能容易被忽略的细节
真正卡住响应式的往往不是选错方案，而是容器尺寸约束和溢出行为没处理好。
-
gap在 Safari 14.1+ 才稳定，旧版需 fallback；IE11 基本不考虑，display: grid用前缀也缺关键特性（如auto-fit、subgrid） - Grid 的二维计算开销略高于 Flex，但差异在千分之一秒级；真卡顿通常来自未节流的
resize监听或没设contain: layout - 无论用哪种，
min-height: 0、overflow: auto、contain: layout这些才是响应式落地的关键细节
