CSS 布局进阶：Flex 与 Grid 心智模型（含常见坑与示意图）

Flex 和 Grid 不是“二选一”，而是两把不同的尺子。你需要的是稳定的判断方法：什么时候用 Flex，什么时候用 Grid，为什么会溢出，怎么修。

先把轴弄明白：主轴/交叉轴决定了大部分属性

Flex 里最容易混的是这两对属性：

• justify-content：沿 主轴 排列
• align-items：沿 交叉轴 对齐（单行/单列）

主轴由 flex-direction 决定：

• row：主轴水平
• column：主轴垂直

Flex 的尺寸分配：为什么 flex: 1 有用，为什么会溢出

flex 三件套：basis / grow / shrink

你可以把 Flex 的尺寸分配理解成三步：

1. 先用 flex-basis 确定每个子项“起始尺寸”（默认是 auto，会参考内容/width）
2. 还有剩余空间就按 flex-grow 分配
3. 不够放时就按 flex-shrink 压缩（但会被 min-width 限制）

常见快捷写法：

• flex: 1 ≈ flex: 1 1 0%（更倾向于平均分剩余空间）
• flex: 0 0 auto（不伸不缩，用内容/width）

经典坑：长文本把布局撑爆

Flex 子项默认 min-width: auto，等于“至少要能放下内容”。当内容很长（URL/一串英文）时，它不愿被压缩，导致溢出。

解决：给需要收缩的那一列加 min-width: 0，并配合溢出处理：

.right {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Flex 常用布局配方（带原因）

1) 水平 + 垂直居中

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

2) 两列布局：左固定，右自适应

.layout {
  display: flex;
  gap: 16px;
}
.left {
  width: 240px;
}
.right {
  flex: 1;
  min-width: 0;
}

3) 顶部固定，底部贴底（常见页面骨架）

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
}

Grid：真正的“二维布局”工具

Grid 的优势在于：你可以同时定义 列宽、行高、间距，并且让元素按“格子”对齐。

1) 自适应卡片网格（最常用）

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

这段的意思是：每个卡片最小 220px，能放几列放几列，屏幕变窄会自动换行。

2) 用 template-areas 写“可读性很强”的页面结构

.page {
  display: grid;
  gap: 16px;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    'sidebar header'
    'sidebar main';
}
.sidebar {
  grid-area: sidebar;
}
.header {
  grid-area: header;
}
.main {
  grid-area: main;
}

当布局复杂、区域明确时，Grid 往往比 Flex + 多层嵌套更清晰。

小技巧与避坑（高频）

• 优先用 gap 控制间距，少用“最后一个元素去掉 margin”的写法。
• Flex 子项出现溢出时，先想到 min-width: 0（以及 overflow 处理）。
• Grid 做响应式优先用 minmax() + auto-fit，通常比写一堆媒体查询更省心。
• 布局调试建议：临时加 outline: 1px solid red; 看盒子边界。