flex 和 grid 布局各适合什么场景？

两者都是现代布局方案，核心差异是维度：Flex 是一维布局（沿主轴排列一行或一列），Grid 是二维布局（同时控制行和列）。

Flex 适合：导航栏、工具条、卡片内部元素的排列、等分空间、垂直居中等「内容驱动」的场景——尺寸由内容决定，容器负责分配剩余空间（flex-grow/shrink/basis）。

Grid 适合：整体页面骨架、照片墙、日历、不规则网格等「布局驱动」的场景——先定义轨道（grid-template-columns/rows），再把内容放进格子，还能用 grid-area 做重叠与命名区域。

.nav { display: flex; gap: 12px; }        /* 一行排开 */
.page {
  display: grid;
  grid-template-columns: 200px 1fr;      /* 侧边栏 + 主区 */
  grid-template-rows: 60px 1fr;
}

经验法则：宏观结构用 Grid，局部组件用 Flex，两者常嵌套混用。易错点：Flex 项目默认 min-width: auto 导致内容溢出，需 min-width: 0；Grid 中 fr 单位与 minmax() 的配合。追问：flex: 1 的完整含义、auto-fill 与 auto-fit 的区别。