Flex 和 Grid，什么时候用哪个

一句话区别

• Flex：一维布局。一行或者一列，只管一个方向。
• Grid：二维布局。同时管行和列。

导航栏、按钮组、列表项内部——用 Flex。 整页框架、卡片瀑布、表单两列——用 Grid。

场景一：导航栏（Flex）

.nav {
  display: flex;
  align-items: center;      /* 垂直居中 */
  gap: 16px;                /* 比 margin 好用，不用处理最后一个 */
}
.nav .logo { margin-right: auto; }  /* 把右边的东西推过去 */

margin-right: auto 是 Flex 里做"左边一组、右边一组"最简单的方式，不用额外加占位元素。

场景二：整页框架（Grid）

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 80px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

grid-template-areas 画出来的是一张 ASCII 图，改布局就是改这张图，比算列宽直观。

场景三：卡片自适应换行（Grid）

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

这一行就能做到"宽度够就四列，窄了就三列两列一列"，不需要媒体查询。是 Grid 最值得记的一条。

场景四：垂直居中（两个都行）

/* Flex */
.center { display: flex; align-items: center; justify-content: center; }

/* Grid */
.center { display: grid; place-items: center; }

Grid 版本更短，但 Flex 版本兼容性更好（其实现在都无所谓了）。

常见坑

gap 在 Flex 里，Safari 14.1 之前不生效，如果还要兼容老 Safari，得用 margin 加 :not(:last-child) 兜底。

1fr 不等于 auto：1fr 是可分配空间，auto 是内容决定。grid-template-columns: 1fr 1fr 在两列内容宽度差异大时会不均分——因为 1fr 的默认最小值是 auto，要写 minmax(0, 1fr) 才能真均分。

Grid 的 auto-fill 和 auto-fit 不一样：容器很宽、卡片很少时，auto-fill 会留空轨道，auto-fit 会把轨道折叠掉让卡片撑满。做卡片列表通常想要 auto-fit。

我的习惯

先想"这块内容是几维的"：

• 一个方向排列 → Flex
• 需要同时控制行列 → Grid
• 说不清 → 先写 Flex，写不下去再换 Grid

不要为了用 Grid 而用 Grid，Flex 能干净解决的场景，Grid 往往要写更多属性。