Grid是二维布局，适合页面整体结构；Flexbox是一维布局，适用于组件内部排列。前者通过grid-template定义行列，支持区域命名，用于复杂网格；后者利用主轴与交叉轴对齐内容，常用于导航、按钮组等线性布局。两者可结合使用，根据“整体结构”或“内部排列”需求选择。
css Grid 布局和 Flexbox 都是现代 CSS 提供的强大布局工具，但它们的设计目标和适用场景有所不同。理解它们的区别能帮助你在实际开发中选择更合适的方案。
Grid 是二维布局系统
Grid 布局专注于处理行和列的二维空间布局，适合划分整个页面或复杂模块的结构。
• 可以同时控制行和列，定义网格区域、轨道大小、对齐方式等 • 使用 grid-template-rows 和 grid-template-columns 明确定义网格结构 • 支持命名网格区域（grid-area），便于可视化布局设计 • 适合做整体页面布局，比如头部、侧边栏、主内容区、页脚的排布
例如，创建一个三栏两行的页面框架非常直观：
.container { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr; }
Flexbox 是一维布局系统
Flexbox 主要用于沿单一方向（水平或垂直）排列元素，更适合组件级的布局。
立即学习“前端免费学习笔记（深入）”；
• 控制主轴和交叉轴上的对齐与分布 • 能够动态分配容器内的空间，适应不同尺寸的内容 • 常用于按钮组、导航栏、卡片内部元素对齐等场景 • 子元素可以自动伸缩以填充可用空间
比如让一组导航链接均匀分布在一行中：
.nav { display: flex; justify-content: space-around; }
关键区别总结
• 维度不同：Grid 是二维（行+列），Flexbox 是一维（行 或 列） • 用途不同：Grid 适合页面级布局，Flexbox 更适合组件内部排列 • 定位方式：Grid 支持将项目放置在任意网格单元，Flexbox 依赖文档流顺序 • 灵活性：Flexbox 在内容不确定时表现更好；Grid 在结构固定时更清晰
如何选择使用哪种布局
• 如果你需要设计一个包含多个区块的完整页面结构，优先考虑 Grid • 如果你只想让几个元素在一行或一列中对齐、居中、等分空间，用 Flexbox 更简单 • 实际项目中两者常结合使用：Grid 做整体布局，Flexbox 处理局部对齐
基本上就这些。掌握它们的核心理念后，你会发现大多数布局问题都能快速找到合适解法。不复杂但容易忽略的是：先想清楚你要解决的是“整体结构”还是“内部排列”。