Flex适用于一维布局（单行/列对齐、分布、顺序调整），Grid专用于二维网格（行列同时控制）；二者分工明确，常嵌套使用——Grid作外层区域划分，Flex处理内部细节对齐。
一维线性排列直接用 display: flex，二维网格结构必须用 display: grid；二者不是二选一，而是分工明确、常需共存。
什么时候该用 display: flex
你面对的是“一行或一列”的对齐、分布、顺序调整问题，比如导航栏菜单、表单控件组、按钮堆叠、卡片内部标题+内容+操作按钮的垂直排列。
-
justify-content和align-items两行就能居中任意单个元素，flex-wrap: wrap加gap就能做响应式卡片流，无需计算列宽 - 子项数量不确定时更稳——
flex: 1自动撑满剩余空间，order可视觉重排，不依赖 HTML 顺序 - 常见翻车点：
align-content对单行无效，误以为它能控制多行间距；flex-basis设为0才能让flex-grow真正按比例分配，设成auto或具体值会干扰计算 - 兼容性仍略优：iOS 9 Safari 对
grid-gap有偏移 bug，但flex-gap在 iOS 14.5+ 已稳定
什么时候必须用 display: grid
当你需要同时控制行和列——比如页头/侧边栏/主内容/页脚的页面骨架、仪表盘里图表与指标卡的行列对齐、图文混排文章中图片左文右的固定位置、或者商品列表要求“每行三列、高度一致、第 4 项自动落第二行第一列”。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))一行搞定响应式列数，不用写一堆@media断点 -
grid-template-areas让布局意图一目了然，比嵌套三层display: flex更易读、更易维护 - 跨行跨列靠
grid-column: 1 / -1或grid-row: span 2，Flex 完全做不到 - 容易忽略：
grid容器内设justify-content是无效的——它只响应justify-items或justify-self；同理，flex容器的子项设grid-column浏览器直接忽略
为什么不能只靠一个技术打天下
真实项目里，grid 常作为外层容器划分区域，每个区域内再用 flex 处理细节对齐。比如仪表盘用 grid 划出「筛选区」「图表区」「数据卡区」，而每张数据卡内部用 flex 居中图标+文字+数值。
立即学习“前端免费学习笔记（深入）”；
- 反模式：在
grid容器里给子项又设display: grid——除非真需要二级网格控制，否则大概率是层级职责没分清 - 性能提示：Flex 嵌套超过 3 层时重排开销明显上升；Grid 的
minmax()和auto-fit虽强大，但复杂calc()表达式在滚动中可能触发频繁重算 - IE11 兜底仍是现实：如果项目需支持 IE11，
grid-template-areas、gap、auto-fit都得降级，但flex的核心能力（flex-grow、justify-content）仍可用
真正卡住人的往往不是语法，而是没想清楚：这个布局问题是“内容怎么排成一行”（Flex），还是“容器怎么划出格子再填内容”（Grid）。先定维度，再选方案，比背属性重要得多。
