Flex 和 Grid 应该怎么选
Flex 和 Grid 并不是互相替代：Flex 擅长一条轴线，Grid 擅长同时控制行和列。
先用白话理解
这篇内容在讲什么？
Flex 适合排一行或一列，Grid 适合同时管理行和列。
问题
卡片用 Flex 后每行对不齐，应该换 Grid 吗？
没有先判断布局是一维还是二维。
解决方案
- 单行单列优先 Flex
- 规则行列优先 Grid
- 外层 Grid 内部 Flex
- 使用 minmax 避免固定宽度
自适应网格与卡片内部布局示例代码
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 16px;
}
.card {
display: flex;
flex-direction: column;
min-width: 0;
padding: 20px;
}
.card__action {
margin-top: auto;
}
@media (max-width: 640px) {
.card-grid { grid-template-columns: 1fr; }
}线性排列优先 Flex
导航、按钮组、工具栏和单行卡片适合 Flex，可以方便处理对齐、间距和剩余空间。
规则网格优先 Grid
卡片列表、仪表盘和明确行列关系的页面适合 Grid，布局规则更直观。
允许组合使用
外层使用 Grid 定义页面区域，卡片内部使用 Flex 排列内容，是非常常见的组合方式。
- 先判断是一维还是二维
- 避免依赖固定宽度
- 测试内容变长后的表现
结语
判断最终要回到真实体验
技术方案没有脱离场景的标准答案。把用户任务、业务边界、开发成本和长期维护放在一起评估，才有可能做出稳定、清晰且经得起变化的页面。
照着做的步骤
- 判断布局是一维还是二维
- 先定义容器规则
- 让子项保持弹性
- 检查长文字和窄屏
容易踩的坑
- 大量使用固定宽度
- 用 margin 硬凑间距
- 忽略内容高度不同
术语不用怕
- 主轴：Flex 排列方向
- 交叉轴：与主轴垂直方向
- 网格轨道：Grid 的行或列