flex适用于一维线性布局，grid专用于二维网格布局；二者分工明确，常嵌套使用——grid作外层区域划分，flex处理内部细节对齐。
Flexbox 更适合单行/单列的响应式组件，Grid 更适合需要同时控制行列的整页响应式结构。
什么时候用 display: flex 做响应式更稳？
当布局本质是“一维流”——比如导航栏、表单控件组、卡片列表、按钮组——flex 的自动换行（flex-wrap: wrap）、内容驱动伸缩（flex: 1）、垂直居中（align-items: center）天然契合响应式需求。
- 移动端折叠侧边栏？直接对某项设
display: none，其余项自动撑满，不用改布局定义 - 子项高度不一致但要等高？默认
align-items: stretch就生效，无需额外 hack - 动态增减菜单项？
flex不依赖预设轨道数，新增<li>后自动排列，DOM 和 CSS 都干净 - 注意陷阱：
height: 100%在 flex 子项里常失效，因为父容器没显式高度；改用min-height: 0或设height才能触发继承
什么时候必须上 display: grid？
当你需要在不同断点间“重排区域语义”，而不是只调顺序或显隐——比如桌面端是 header / sidebar / main / aside / footer 五区，平板变 header / main / footer 三区，手机端变成 header → main → footer 垂直堆叠，且各区域内容语义固定——这时 grid-template-areas 是唯一可维护方案。
- 媒体查询只需改一行：
@media (max-width: 768px) { .container { grid-template-areas: "header" "main" "footer"; } } - 某区块需跨两行又占半列？
grid-column: 2 / span 1; grid-row: 1 / span 2;直接定位，Flexbox 得靠 wrapper 嵌套或 JS 补位 - 侧边栏从固定宽（240px）过渡为可折叠抽屉？用
grid-template-columns: 0fr 1fr+transition，比 Flexbox 的width+max-width+overflow组合更可控 - 注意兼容性：IE11 只支持旧版
display: -ms-grid，不支持gap、subgrid、auto-fit，实际项目中几乎不可用
flex 和 grid 混用不是妥协，而是分层
现代响应式页面通常不是二选一，而是分层使用：外层用 grid 定义语义区域（header/main/footer），内层用 flex 排列区域内容（如 header 里的 logo + nav + search）。
- 不要在
grid容器里强行塞flex来解决对齐问题——先确认是不是该用justify-items或place-self - 避免
flex嵌套超过 3 层，此时视觉逻辑已超一维范畴，应考虑抽离为独立grid区域 - 性能敏感场景（如高频滚动仪表盘），
grid的二维计算开销略高于flex，但差异仅在千分之一秒级，真正卡顿往往来自未节流的 resize 监听或未设will-change: transform
真正容易被忽略的不是“选哪个”，而是容器尺寸约束和溢出行为——无论用哪种布局，min-height: 0、overflow: auto、contain: layout 这些细节才决定响应式是否真能落地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
