flex解决一维排列（单行/列），grid解决二维网格（行列定位）；真实项目中外层grid划区、内层flex对齐，二者分层协作而非二选一。

选型不是看哪个“更现代”，而是看布局问题本身是一维还是二维——Flex解决“怎么排成一行/一列”，Grid解决“怎么放进格子并控制行列位置”。

单行/单列对齐、分布、顺序调整就用 display: flex

导航栏、按钮组、表单控件水平排列、卡片内图标+文字+操作按钮的垂直堆叠，都属于典型一维问题。用 flex 几行就能搞定：

• justify-content: space-between 和 align-items: center 两行实现水平垂直居中，不用算 margin 或 transform
• 子项数量不确定时，flex: 1 自动撑满剩余空间；order 可视觉重排，不依赖 HTML 顺序
• 换行只需加 flex-wrap: wrap，配合 gap 就是响应式卡片流，不用写 media query 控制列数
• 常见翻车点：align-content 对单行无效；flex-basis 设为 0 才能让 flex-grow 按比例分配，设成 auto 或具体值会干扰计算

需要同时控制行和列就必须用 display: grid

页头/侧边栏/主内容/页脚的页面骨架、仪表盘里图表与指标卡的行列对齐、图文混排中图片左文右的固定位置、商品列表要求“每行三列且第4项自动落第二行第一列”，这些全是二维问题。

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

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

下载

• grid-template-columns: repeat(3, 1fr) 一行定义列结构，grid-template-rows: 100px auto 同时定义行高，无需嵌套容器
• grid-column: 1 / -1 跨整行，grid-row: span 2 跨两行——Flex 完全做不到
• grid-template-areas 让布局意图一目了然，比三层 display: flex 嵌套更易读、更易维护
• 注意：justify-content 在 grid 容器里无效，要用 justify-items 或 justify-self；同理，align-items 也无效，得用 align-content（针对多行）或 align-self（针对单个项）

真实项目里它们不是二选一，而是分层协作

外层用 Grid 划分区域，每个区域内再用 Flex 处理细节对齐——这是最稳定、最易维护的组合方式。

• 比如仪表盘：用 display: grid 定义「筛选区」「图表区」「数据卡区」三个区域；每张数据卡内部用 display: flex 居中图标+文字+数值
• 媒体对象（media object）布局：外层 display: grid 固定图片宽度+内容区域，内部 display: flex 垂直对齐标题/描述/操作按钮
• 反模式：在 grid 容器里给子项又设 display: grid——除非真需要二级网格控制，否则大概率是层级职责没分清
• 性能提示：Flex 嵌套超过 3 层时重排开销明显上升；Grid 的 minmax() 和 auto-fit 强大，但复杂 calc() 表达式在滚动中可能触发频繁重算

兼容性与兜底要考虑实际运行环境

别只看 Can I Use 上的绿色支持率，得看你的用户真正在用什么。

• iOS 9 Safari 对 grid-gap 有偏移 bug，但 flex-gap 在 iOS 14.5+ 已稳定；Android 4.4 Webview 中部分 Grid 特性（如 subgrid）缺失或行为异常
• 如果必须支持 IE11：grid-template-areas、gap、auto-fit 都得降级，但 flex-grow、justify-content 等核心能力仍可用
• 移动端适配时，flex-direction 切换主轴方向比重写 grid-template-areas 更轻量，响应式成本更低

真正卡住人的往往不是语法记不住，而是没想清楚：这个布局问题是“内容怎么排成一行”（Flex），还是“容器怎么划出格子再填内容”（Grid）。维度判断错了，后面所有代码都在徒劳地绕弯。

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