flex适用于一维布局（如导航条、表单对齐），grid适用于二维布局（如页面分栏、网格画廊）；二者可嵌套使用，但父容器不能同时为两者，需按层级分工。
什么时候该用 flex，什么时候该用 grid
别想着“统一用一种”，它们解决的是不同维度的问题：flex 是一维布局（主轴或交叉轴优先），适合组件内元素的对齐、分布、顺序调整；grid 是二维布局（行 + 列同时控制），适合整体页面结构、模块网格、复杂响应式区域划分。
典型误用：用 grid 去居中一个按钮，或用 flex 去实现三栏等高自适应首页布局——前者过度，后者力不从心。
-
flex更适合：nav导航条、卡片内标题+按钮排列、表单控件对齐、加载骨架行内占位 -
grid更适合：main区域分栏、仪表盘卡片网格、响应式图片画廊、带固定侧边栏的后台界面
父容器不能同时是 flex 和 grid，但子元素可以自由嵌套
一个 DOM 元素的 display 只能是 flex 或 grid（或其它值），但你可以让 grid 容器里的某个子项设为 display: flex，反之亦然。这是组合的关键。
常见结构：
立即学习“前端免费学习笔记（深入）”；
-
body→display: grid（定义页眉/主区/页脚三行） -
header→display: flex（内部 logo + nav + 用户头像水平排布） -
main→display: grid（划分为sidebar+content两列） -
content内部卡片列表 →display: flex（每张卡片内图片左、文字右，且垂直居中）
注意 flex 子项在 grid 容器中的尺寸行为
当 flex 元素作为 grid 的直接子项时，它的 flex-basis、flex-grow 等属性仍生效，但受制于所在 grid 轨道（track）的尺寸约束。也就是说：grid 先分配空间，flex 再在其分到的“盒子”里做内部伸缩。
容易踩的坑：
-
grid-column: span 2的项内部用flex，但忘了给它设min-width: 0→ 内部flex项可能溢出（尤其含长文本时） -
grid-template-columns: 1fr 2fr下，fr单元格里的flex容器默认会按内容撑宽，需加width: 100%或min-width: 0才能真正填满 - 不要指望
flex: 1能跨过grid边界去抢邻格空间——它只在自己被分配到的格子里起作用
响应式切换建议用 @container 或媒体查询，而不是强行混用
有人想“小屏用 flex，大屏切 grid”，结果写一堆重复 HTML 或 JS 切换 display 值。更干净的做法是：
- 保持同一套 HTML 结构
- 用媒体查询分别控制外层容器的
display：@media (min-width: 768px) { .card-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } @media (max-width: 767px) { .card-list { display: flex; flex-direction: column; } } - 若支持
@container（现代浏览器），可对卡片容器本身做尺寸感知，比全局断点更精准
混合不是为了炫技，而是让每个工具在它最擅长的位置发力。真正难的不是怎么写，而是判断哪一层该交给 grid 划地盘，哪一层该交给 flex 搞细节对齐——这个边界感，得靠多拆几次真实页面结构才能建立起来。
