一维 vs 二维

Flexbox 擅长单轴方向的排列，适合导航栏、按钮组、卡片行等；Grid 则天生支持二维布局，用来构建页面整体框架或复杂瀑布流最为得力。

经典用例

/* 水平居中 — Flexbox */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 12 列网格 — Grid */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

何时混用？

外层用 Grid 定义大结构，内层用 Flexbox 控制组件内部排列，是最常见且推荐的组合方式。