一维排列用flexbox，二维结构用grid；flexbox适合导航栏、卡片内容等单向响应式对齐，grid适合header/main/sidebar等需行列协同的页面级布局。

选哪个不取决于“哪个更先进”，而取决于你要控制的是“一维排列”还是“二维结构”。

Flexbox 适合做组件内响应式对齐

比如导航栏、卡片内容、按钮组这类元素数量不确定、但只沿一个方向排布的场景。Flexbox 的 flex-wrap + justify-content 组合能自然应对屏幕变窄时的换行和间距调整。

• 用 flex-direction: row 配合 flex-wrap: wrap，小屏自动折成多行，无需媒体查询
• justify-content: space-between 在宽屏下撑开间距，窄屏换行后依然保持逻辑清晰
• 注意 align-content 对单行无效——这是最常踩的坑，换行后才生效
• 如果子项高度差异大，align-items: stretch 可能导致意外拉伸，改用 flex-start 更可控

CSS Grid 适合做页面级响应式结构

当你需要同时控制行和列，比如 header/main/sidebar/footer 布局，或仪表盘中多个 widget 跨行跨列摆放时，Grid 是唯一合理选择。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• grid-template-areas 在不同断点下重定义区域顺序，比 Flexbox 的 order 更直观、可维护
• repeat(auto-fit, minmax(300px, 1fr)) 能让列数随容器宽度自动增减，Flexbox 得靠 JS 或冗余 media query 模拟
• Grid 的 gap 是原生属性，Flexbox 还得用 margin hack，响应式下容易错位
• IE11 支持 Grid 但需前缀；若必须兼容老 IE，优先用 Flexbox，或加 fallback 布局

混用才是日常，但别在错误层级嵌套

真实项目里，Grid 容器里放 Flex 子项是标准做法，反过来也常见；问题出在“该用 Flex 的地方硬套 Grid”。

• 按钮内部图标+文字对齐？用 display: flex，别用 display: grid ——语义重、代码重、调试难
• 卡片组件内部垂直堆叠标题/描述/按钮？flex-direction: column + justify-content: space-between 更轻量
• 三层以上 Grid 嵌套会迅速失控，grid-template-areas 在深层嵌套中几乎无法追踪
• Grid 容器设了 height: 100% 但父容器没高度？子项的 1fr 会失效——这是响应式 Grid 最隐蔽的失效点

真正容易被忽略的不是语法，而是“谁该负责哪一层布局”。Grid 管骨架，Flex 管血肉；混淆这两层，响应式就变成一堆 patch 堆出来的巧合。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！