标准答案
- Flex 是一维布局，主要处理一行或一列上的空间分配；Grid 是二维布局，可以同时控制行和列。
- 如果核心是元素沿一个方向排列，并根据剩余空间伸缩，优先用 Flex，比如导航栏、按钮组、头像加文本。
- 如果核心是定义几行几列、元素跨行跨列、整体对齐成网格，优先用 Grid，比如页面骨架、图片墙、商品卡片列表。
- 实际项目里两者经常组合：外层页面结构用 Grid，卡片内部或工具栏一行内容用 Flex。
- 回答时不要说谁取代谁，直接说 Grid 处理二维结构，Flex 处理一维流动。
题目解析
判断标准不是“哪个新”，而是布局是否需要同时控制行列。只要需要稳定的二维轨道，Grid 通常更清楚。
Flex 也能换行做卡片列表，但每一行之间没有共享列轨道；Grid 在这类场景通常更稳定。
代码示例
页面外层用 Grid，卡片内部用 Flex，是常见组合。
CSS
.page {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 24px;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
}常见误区
- 认为 Grid 比 Flex 新，所以所有布局都应该用 Grid。
- 用 Flex 勉强模拟复杂二维布局，导致每行对齐不稳定。
- 忘记 Grid 子项也可能需要 min-width: 0，导致内容撑破布局。