不能只用 Flex 或 Grid 做移动端适配：Flex 在窄屏下易失控（如无最小宽导致横向滚动），Grid 写死列数会令内容过小难读；应分层使用——Grid 划分区域骨架，Flex 管理内部对齐。
为什么不能只用 Flex 或只用 Grid 做移动端适配
纯 display: flex 在窄屏下容易失控：比如三栏卡片列表设了 flex-wrap: wrap，但没控制单卡最小宽度，小屏上会挤出横向滚动条；纯 display: grid 若写死 grid-template-columns: repeat(3, 1fr)，手机上卡片宽不到 100px，文字根本没法读。
真正的问题不是“选哪个”，而是“哪一层该用哪个”——Grid 负责区域骨架，Flex 负责内容对齐。移动端尤其明显：header/logo/菜单/操作区是二维结构，必须用 Grid 划分；而菜单项内部的图标+文字垂直居中、按钮组间距对齐，用 Flex 更稳、更轻、兼容性更好。
- Grid 的
grid-template-areas在媒体查询里改一行字符串就能切换“三栏→单列”骨架，Flex 做不到 - Flex 的
flex-wrap对动态增删的卡片列表重排开销更低，Grid 的grid-auto-flow: dense在尺寸不均时容易抖动 - 两者混用时最常踩的坑：在 Grid 容器上设了
justify-items: center，结果子元素（哪怕自己是 Flex 容器）的align-items: center失效——因为 Grid 的对齐作用于单元格，不是子元素本身
外层用 Grid 划分区域，中间用 Flex 管理菜单流式折行
典型导航条结构：logo 区 + 菜单项区 + 操作按钮区。外层用 Grid 定义三列，中间菜单区再用 Flex 排列链接或按钮。
桌面端写法：
.header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.nav-menu { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }
关键点：
- 不要给
.nav-menu设固定宽度，否则小屏下会撑破容器 - 别用
justify-content: space-between，留白位置不可控 - 响应式优先缩窄
grid-template-columns（如平板从120px 1fr 80px缩为80px 1fr 60px），保持菜单横排；最后一步才切flex-direction: column - 切 column 时务必加
max-height和overflow-y: auto，否则高度失控
下拉菜单错位？先检查 transform 干扰定位上下文
常见现象：position: absolute 的下拉菜单在手机上偏移，点击区域和显示位置不重合。
根因不是 Grid/Flex 本身，而是父级（比如 .header 或 .nav-menu）加了 transform: translateY(0) 或 will-change: transform——这会让它变成新的包含块（containing block），导致绝对定位参照错误。
修复方式只有两个：
- 删掉父级不必要的
transform或will-change（尤其动画优化时随手加的） - 显式给下拉容器加
position: fixed并用 JS 动态算top/left，或挂载到body下（需脱离原 DOM 流）
注意：transform 不是性能银弹，移动端低端机上反而可能触发额外合成层，得不偿失。
卡片列表用 Grid 控制列数，每张卡片用 Flex 控制内部对齐
商品/文章卡片这类内容流，列数要随屏幕自动变化，但每张卡片内部结构（图片+标题+价格+按钮）需要稳定的一维对齐逻辑。
推荐写法：
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; }
.card img { width: 100%; height: 160px; object-fit: cover; }
.card .price { margin-top: auto; }
说明：
-
minmax(250px, 1fr)保证单卡最小可读宽度，窄屏自动减少列数 - 每张卡片用
flex-direction: column+margin-top: auto实现价格底部对齐，比 Grid 的grid-template-rows更适应高度不一致的场景 - 不支持 Subgrid 的旧浏览器 fallback 就是这套 Flex 写法，无需额外 hack
真正容易被忽略的是：Grid 容器的 gap 必须用，不能用 margin 替代；否则窄屏下 margin 可能撑破容器，导致横向滚动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
