Appearance
Flex 与 Grid：一维分配和二维网格如何选型
主题边界
- Flexbox 解决主轴与交叉轴上的一维分配问题；Grid 解决行列同时成立的二维轨道问题。
- 真正的关键是理解两者的空间计算模型，而不是背属性表。
机制与流程
- Flex 先确定主轴剩余空间，再根据
flex-grow、flex-shrink、flex-basis做分配；对齐依赖justify-content和align-*。 - Grid 先建立显式或隐式轨道，再基于
fr、固定尺寸、内容尺寸和自动放置算法决定网格项位置。 - Flex item 的默认
min-width: auto会保留内容最小宽度，因此文本溢出常需要显式写min-width: 0。
关键差异
- 导航栏、按钮组、卡片横向排列更适合 Flex；仪表盘、复杂表单、宫格布局更适合 Grid。
- Grid 可以表达跨行跨列关系，Flex 不擅长回头补位；Flex 在内容驱动的一维伸缩上更自然。
边界条件
- “用 Grid 就能替代一切”是误判，很多简单线性布局用 Grid 只会增加维护成本。
- Flex 与 Grid 嵌套使用非常常见，外层决定区域，内层决定局部对齐。
工程落点
- 排查布局错位时，要先判断问题出在轨道定义、最小内容宽度，还是轴向分配规则。
- 响应式组件通常会把大区域交给 Grid，把局部操作区交给 Flex。