CSS 布局笔记：什么时候用 Flex，什么时候用 Grid

Flex 和 Grid 都能「排列元素」，所以刚学的时候很容易纠结。用久了会发现它们其实在回答两个不同的问题。

一条简单的判断规则

一维用 Flex，二维用 Grid。只需要沿一条轴排开，用 Flex；需要同时控制行和列，用 Grid。这条规则能覆盖我遇到的九成场景。

Flex 适合的场景

• 导航栏、按钮组、图标加文字这类横向排列
• 内容长度不定，希望剩下的空间自动分配
• 需要垂直居中，或者让最后一个元素靠右

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

Grid 适合的场景

• 卡片列表，需要固定列数并随屏幕变化
• 整页布局，需要同时控制区域的行和列
• 对齐要求严格，希望列宽由容器统一决定

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

这一行写法基本可以替代大多数媒体查询：屏幕宽就多排几列，窄了就自动减少。

两个常见误区

第一个是把 Flex 当万能布局用，写出一堆 flex-basis 和 margin 的补丁；第二个是明明只有一行元素，却用 Grid 定义了一套复杂模板。

我的经验是：先用最少的声明把结构摆对，再考虑细节。布局代码越短，后面改起来越轻松。

小结

• 顺序排列找 Flex，格子排列找 Grid。
• 两者可以嵌套，不必二选一。
• gap 比手动加 margin 干净得多。