[!info] related notes

• 所属 MOC: css-moc、frontend-basics-moc
• 相关概念:
• 易混淆概念:
• 相关资源:

Flex vs Grid

一句话关系

Flex 更擅长沿一条主轴组织内容；Grid 更擅长同时定义行和列的二维结构。

这个判断比“Flex 简单、Grid 复杂”更稳定。

Flex 的问题模型

先问：

这一排 / 这一列元素
应该如何排列、伸缩和分配剩余空间？

典型场景：

• 工具栏；
• 导航项；
• 一排按钮；
• label + input；
• 卡片内部的横向/纵向排列。

核心心智是：

• main axis；
• cross axis；
• item distribution。

Grid 的问题模型

先问：

整个区域需要怎样切成行、列和区域？

典型场景：

• 页面骨架；
• Dashboard；
• 卡片宫格；
• 显式二维区域布局；
• 需要跨行/跨列的结构。

核心心智是：

• rows；
• columns；
• tracks；
• grid lines / areas。

不是互斥选择

真实界面经常：

外层 Grid 切页面区域
→ 内层 Flex 排一行按钮

或者反过来。

因此不要问：

项目应该统一用 Flex 还是 Grid？

而要问：

当前这一层布局关系是一维内容分布，还是二维结构定义？

Wrap 不会自动把 Flex 变成 Grid

flex-wrap 可以产生多行，但每一行仍主要按 Flex 的一维分布模型计算。

如果你关心的是：

• 不同行之间列必须严格对齐；
• 显式定义多列轨道；
• 整体二维关系；

Grid 通常更直接。

学习检查

1. Flex 和 Grid 的核心差异为什么不是“是否能排多行”？
2. 主轴 / 交叉轴属于哪一种模型？行 / 列轨道属于哪一种？
3. flex-wrap 为什么不能完全替代 Grid？
4. 一排操作按钮和 Dashboard 主布局分别更自然地从哪种模型开始？
5. 为什么外层 Grid + 内层 Flex 是正常设计，而不是“混用技术栈”？
6. 给一个新布局，不写 CSS，先说明你会根据什么结构特征选择 Flex 或 Grid。