现代 CSS 布局：Grid 与 Flex 怎么选

Grid 和 Flex 并不是互相替代的两套方案。Flex 更适合处理一条轴线上的排列，Grid 更擅长同时控制行与列。先看内容关系，再选择工具，比记忆大量属性更有效。

一维排列优先考虑 Flex#

导航栏、按钮组、头像与用户名，这类内容通常沿一个方向排列。Flex 可以方便地处理对齐、间距和剩余空间。

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toolbar__actions {
  margin-left: auto;
}

margin-left: auto 会占据左侧剩余空间，把操作区域推到最右边。它比添加空元素更稳定。

二维结构优先考虑 Grid#

卡片墙、后台页面和图文分栏通常同时存在行列关系。Grid 可以直接描述整体结构。

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.25rem;
}

这段代码会根据容器宽度自动调整列数。卡片不会小于设定宽度，在窄屏上也不会溢出。

允许两者组合#

实际页面经常外层使用 Grid 控制区域，内层使用 Flex 对齐内容。例如卡片列表由 Grid 排列，每张卡片内部再用 Flex 让按钮贴近底部。

选择布局方式时，可以问两个问题：内容主要沿一个方向流动吗？行与列是否需要彼此对齐？第一个答案是“是”时倾向 Flex，第二个答案是“是”时倾向 Grid。