选 Flex 还是 Grid，关键看“谁先定结构”：内容自适应排布用 flex；先画格子再填内容用 grid。Flex 适合单向动态排列，Grid 适合二维强约束布局，实际项目常组合使用。
选 Flex 还是 Grid，不看“高大上”，只看“谁先定结构”：内容自己伸缩排布，用 flex；你先画好格子再填内容，用 grid。
Flex 适合「单向动态排列」的场景
当你面对的是一组元素，它们天然属于同一行或同一列，并且需要根据内容多少、容器宽度自动调整间距、换行或对齐，flex 就是直觉解。它不关心“第几行第几列”，只关心“怎么在一条线上摆整齐”。
常见错误现象：justify-content: space-between 在多行 flex-wrap: wrap 下失效——因为 justify-content 只作用于单行主轴，换行后每行独立计算，无法跨行对齐。
- 导航栏（Logo + 菜单项 + 用户头像）：用
display: flex+justify-content: space-between一行搞定 - 卡片内部标题+按钮+状态标签的水平对齐：用
align-items: center控制交叉轴，无需额外 wrapper - 响应式按钮组（小屏堆成一列，大屏并排）：只需
flex-direction: column配合媒体查询，比 Grid 的grid-template-rows更轻量 - 垂直居中一个未知高度的弹窗：父容器
display: flex; align-items: center; justify-content: center，干净利落
Grid 适合「二维位置强约束」的场景
当你心里已经有张“草图”：这个区域必须占两列，那个模块要横跨三行，页眉固定在顶部、侧边栏永远在左、主内容自适应剩余空间——那就别折腾嵌套 flex，直接上 grid。它强制你先定义轨道，再放内容，容错率低但控制力强。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：grid-column: 2 / -1 这种负值写法在旧版 Safari 中不兼容；更稳妥的是用命名线（grid-template-columns: [start] 1fr [main] 2fr [end]）或 span。
- 仪表盘布局（4个指标卡 + 折线图 + 表格）：用
grid-template-areas命名区块，换肤或响应式时只需改grid-template-areas字符串 - 响应式表单（label 左对齐、input 占满右侧）：
grid-template-columns: max-content 1fr比 float 或 inline-block 更稳定 - 九宫格图标列表（3×3，但中间格子要放大）：用
grid-column: 2 / 4; grid-row: 2 / 4直接合并，不用 JS 计算位置 - 复杂页脚（版权信息左对齐、链接居中、社交图标右对齐）：单层
grid容器配合justify-self分别控制每个子项，无需额外 div 包裹
别硬扛：嵌套才是真实项目里的常态
实际页面从来不是非此即彼。典型组合是：外层用 grid 划分大区域（header / sidebar / main / footer），每个区域内再用 flex 排子元素。比如 main 是一个 grid 容器，里面放三张卡片；每张卡片自身又是 display: flex，控制标题、描述、操作按钮的对齐。
性能提示：Chrome DevTools 的 Layout Shifts 面板里，grid 的初始渲染略慢（因需解析轨道定义），但后续 resize 或 DOM 更新时，flex 的重排开销反而可能更高——尤其当子项数量多且 flex-grow 规则复杂时。
兼容性底线：如果必须支持 IE11，grid 需加 -ms- 前缀且不支持 gap（得用 margin 模拟）；而 flex 的兼容性更好，但 flex-wrap: wrap-reverse 等新特性仍需留意。
最常被忽略的一点：语义与可维护性
用 grid 写出的布局，哪怕没注释，别人也能从 grid-template-areas 或 grid-column 值一眼看出结构意图；而层层 flex 嵌套的代码，三个月后连你自己都可能怀疑“这个 align-self: flex-end 到底想对齐谁”。真正影响交付节奏的，往往不是渲染快慢，而是下次改布局时，你花 5 分钟还是 50 分钟看懂自己写的 CSS。
