Flexbox 和 Grid 应该如何选择？

Flexbox 主要处理一个方向上的空间分配，适合工具栏、导航和内容驱动的排列。Grid 同时定义行与列，适合卡片网格、页面骨架和跨行跨列布局。

两者可以组合使用。例如外层 Grid 划分侧栏与内容区，卡片内部使用 Flex 对齐标题和按钮。

.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
}

minmax(0, 1fr) 可以避免主列被长内容的默认最小尺寸撑开；Flex 子项有类似问题时可检查 min-width: 0。