Flex解决一维排列（单行/列），Grid解决二维网格（行列定位）；真实项目中外层Grid划区、内层Flex对齐，二者分层协作而非二选一。
选型不是看哪个“更现代”，而是看布局问题本身是一维还是二维——Flex解决“怎么排成一行/一列”，Grid解决“怎么放进格子并控制行列位置”。
单行/单列对齐、分布、顺序调整就用 display: flex
导航栏、按钮组、表单控件水平排列、卡片内图标+文字+操作按钮的垂直堆叠，都属于典型一维问题。用 flex 几行就能搞定：
-
justify-content: space-between和align-items: center两行实现水平垂直居中，不用算 margin 或 transform - 子项数量不确定时，
flex: 1自动撑满剩余空间；order可视觉重排，不依赖 HTML 顺序 - 换行只需加
flex-wrap: wrap，配合gap就是响应式卡片流，不用写 media query 控制列数 - 常见翻车点：
align-content对单行无效；flex-basis设为0才能让flex-grow按比例分配，设成auto或具体值会干扰计算
需要同时控制行和列就必须用 display: grid
页头/侧边栏/主内容/页脚的页面骨架、仪表盘里图表与指标卡的行列对齐、图文混排中图片左文右的固定位置、商品列表要求“每行三列且第4项自动落第二行第一列”，这些全是二维问题。
-
grid-template-columns: repeat(3, 1fr)一行定义列结构，grid-template-rows: 100px auto同时定义行高，无需嵌套容器 -
grid-column: 1 / -1跨整行，grid-row: span 2跨两行——Flex 完全做不到 -
grid-template-areas让布局意图一目了然，比三层display: flex嵌套更易读、更易维护 - 注意：
justify-content在 grid 容器里无效，要用justify-items或justify-self；同理，align-items也无效，得用align-content（针对多行）或align-self（针对单个项）
真实项目里它们不是二选一，而是分层协作
外层用 Grid 划分区域，每个区域内再用 Flex 处理细节对齐——这是最稳定、最易维护的组合方式。
立即学习“前端免费学习笔记（深入）”；
- 比如仪表盘：用
display: grid定义「筛选区」「图表区」「数据卡区」三个区域；每张数据卡内部用display: flex居中图标+文字+数值 - 媒体对象（media object）布局：外层
display: grid固定图片宽度+内容区域，内部display: flex垂直对齐标题/描述/操作按钮 - 反模式：在 grid 容器里给子项又设
display: grid——除非真需要二级网格控制，否则大概率是层级职责没分清 - 性能提示：Flex 嵌套超过 3 层时重排开销明显上升；Grid 的
minmax()和auto-fit强大，但复杂calc()表达式在滚动中可能触发频繁重算
兼容性与兜底要考虑实际运行环境
别只看 Can I Use 上的绿色支持率，得看你的用户真正在用什么。
- iOS 9 Safari 对
grid-gap有偏移 bug，但flex-gap在 iOS 14.5+ 已稳定；Android 4.4 Webview 中部分 Grid 特性（如subgrid）缺失或行为异常 - 如果必须支持 IE11：
grid-template-areas、gap、auto-fit都得降级，但flex-grow、justify-content等核心能力仍可用 - 移动端适配时，
flex-direction切换主轴方向比重写grid-template-areas更轻量，响应式成本更低
真正卡住人的往往不是语法记不住，而是没想清楚：这个布局问题是“内容怎么排成一行”（Flex），还是“容器怎么划出格子再填内容”（Grid）。维度判断错了，后面所有代码都在徒劳地绕弯。
