一维布局用flexbox，二维布局用grid；flexbox适合单行/列内容流与响应式换行，grid适合复杂网格结构与区域划分，二者机制不同且不可混用。
一维布局用 flexbox，二维布局用 grid
Flexbox 是为单行/单列内容流设计的，核心目标是分配剩余空间、对齐子项、控制顺序；Grid 是为整体网格结构服务的，能同时定义行和列的尺寸、间距与区域。别被“都能居中”误导——flexbox 居中靠 justify-content + align-items，grid 居中靠 place-items 或显式轨道定位，底层机制完全不同。
常见错误现象：display: flex 套多层容器强行模拟网格，结果响应式断点一加就乱套；或反过来，用 grid 布一个纯导航栏，写一堆 grid-template-rows 却只有一行内容，徒增复杂度。
- 导航栏、卡片列表、表单控件组 → 优先
flexbox - 仪表盘、图文混排网格、带固定侧边栏+主内容区的页面骨架 → 优先
grid - 想让某几个子项“挤在左边，最后一个推到最右” →
flexbox的margin-left: auto比grid的justify-self: end更直接
flex-wrap 不等于 grid，但能解决多数“换行”需求
很多人看到需要折行就立刻切 grid，其实 flexbox 的 flex-wrap: wrap 配合 flex-basis 已经能覆盖大部分响应式卡片流场景。Grid 的 grid-auto-flow: dense 虽然也能填空，但语义不清、可维护性差。
性能影响：频繁 resize 下，flex-wrap 的重排开销明显低于 grid 的二维轨道计算，尤其在子项数量超 50 时更明显。
立即学习“前端免费学习笔记（深入）”；
- 卡片宽度固定（如
flex-basis: 280px），容器缩小时自动换行 → 用flex-wrap - 需要“第一行 3 列，第二行 2 列，第三行 4 列”这种不规则分布 → 才该考虑
grid+grid-column手动定位 - IE11 兼容必须？
flexbox支持远好于grid（IE11 的grid是旧语法，且无gap）
嵌套 grid 容易失控，flex 嵌套反而更可控
Grid 的嵌套不是不行，而是每个子容器都得重新定义 grid-template-areas 或轨道，父子之间缺乏自然继承关系。而 flexbox 嵌套时，内层 flex 只负责自己那块内容的排列，逻辑隔离清晰。
典型翻车场景：用 grid 做整体布局后，在某个 grid-area 里再套一层 grid 实现按钮组对齐，结果父级 gap 和子级 gap 叠加错位，调试时找不到源头。
- 侧边栏内部的菜单项垂直排列 →
flexbox+flex-direction: column - 主内容区既要分左右栏，又要每栏内文字和图片上下堆叠 → 外层
grid分栏，内层各用flexbox排内容 - 避免三层及以上
grid嵌套；超过两层就该拆成grid+flex组合
gap 在两者中行为一致，但 justify-content 等属性不能跨布局混用
gap 是少数真正跨布局统一的属性，flex-gap 和 grid-gap 行为完全相同，可以放心复用。但千万别以为 justify-content: space-between 在 grid 中也按 flex 方式分配剩余空间——它只对“轨道之间”的空隙生效，不影响轨道内项目的对齐。
容易被忽略的细节：flexbox 的 align-items 控制交叉轴对齐，grid 的同名属性作用对象是整个网格容器内的项目；而 grid 的 align-content 对应的是 flexbox 的 justify-content（当存在多行/多列时）。
- 想让所有子项在容器内均匀水平铺开 →
flexbox用justify-content: space-between，grid得用grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))+gap - 修改
flex-direction后，justify-content/align-items的作用轴会互换；grid中行列方向由模板定义，不随方向属性动态反转 - 不要在
grid容器上写flex-wrap，也不要在flex容器上写grid-template-columns—— 浏览器会静默忽略
真正难的不是选哪个，是识别出“这个需求表面像二维，其实只需要一维弹性”——比如一个带标题、描述、操作按钮的卡片，看起来有行有列，但用 flexbox + flex-direction: column 就足够了。过早引入 grid 只会让 CSS 变成状态机。
