Flexbox（弹性盒子）和Grid Layout（网格布局）是CSS3推出的两种现代布局模型，二者都解决了传统布局中浮动、定位带来的诸多问题，但设计目标和适用场景存在明显差异，理解这些差异能帮助开发者更高效地完成页面布局工作。
核心设计理念差异
Flexbox的设计初衷是处理一维布局，也就是要么按行排列元素，要么按列排列元素，核心是解决容器内子元素的对齐、分布、伸缩问题，适合处理局部小范围的布局需求。
Grid Layout则是为二维布局设计的，可以同时处理行和列两个维度的布局，允许开发者将页面划分为多个行和列的网格区域，适合处理整体页面结构或者复杂的多区域布局。
布局维度对比
我们可以通过一个简单的对比表格来直观查看两者的维度差异：
| 对比项 | Flexbox | Grid Layout |
|---|---|---|
| 布局维度 | 一维（行或列） | 二维（行和列同时） |
| 子元素排列方向 | 主轴+交叉轴，方向可切换 | 行轨道+列轨道，固定网格结构 |
| 元素定位方式 | 按顺序排列，可调整顺序 | 可指定元素所在的网格区域 |
适用场景差异
Flexbox更适合的场景
- 导航栏、工具栏等水平或垂直排列的组件布局
- 卡片内元素的对齐、分布，比如卡片底部按钮的对齐
- 不确定数量的子元素需要均匀排列的场景
- 需要子元素根据容器空间自动伸缩的场景
下面是一个Flexbox实现水平导航栏的示例代码：
/* 导航栏容器样式 */
.nav-container {
display: flex;
justify-content: space-between; /* 子元素两端对齐 */
align-items: center; /* 子元素垂直居中 */
padding: 0 20px;
height: 60px;
background-color: #f5f5f5;
}
/* 导航项样式 */
.nav-item {
list-style: none;
margin: 0 15px;
font-size: 16px;
color: #333;
}
<ul class="nav-container"> <li class="nav-item">首页</li> <li class="nav-item">产品</li> <li class="nav-item">关于我们</li> <li class="nav-item">联系我们</li> </ul>
Grid Layout更适合的场景
- 整体页面布局，比如页头、侧边栏、主体内容、页脚的网格划分
- 复杂的卡片网格布局，比如电商商品列表的多行多列布局
- 需要精确控制元素在行和列两个维度位置的需求
- 不规则的网格布局，比如某些元素需要跨多行或多列
下面是一个Grid Layout实现三列页面布局的示例代码：
/* 页面容器样式 */
.page-container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 三列：固定200px 自适应 固定200px */
grid-template-rows: 80px 1fr 60px; /* 三行：固定80px 自适应 固定60px */
min-height: 100vh;
gap: 10px; /* 网格间隙 */
}
/* 各区域样式 */
.header {
grid-column: 1 / 4; /* 跨所有列 */
background-color: #4a90e2;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
}
.sidebar {
background-color: #f0f0f0;
padding: 20px;
}
.main-content {
padding: 20px;
}
.footer {
grid-column: 1 / 4; /* 跨所有列 */
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
<div class="page-container"> <div class="header">页头区域</div> <div class="sidebar">侧边栏区域</div> <div class="main-content">主体内容区域</div> <div class="footer">页脚区域</div> </div>
选择建议
实际开发中不需要非此即彼，两者可以结合使用：整体页面结构用Grid Layout划分大的区域，每个区域内部的小组件用Flexbox处理一维排列。如果只需要处理单行或单列的布局，优先选择Flexbox，代码更简洁；如果需要同时控制行和列的布局，或者需要复杂的区域划分，优先选择Grid Layout。
注意：两种布局模型都已经是现代浏览器的标准支持特性，不需要添加浏览器前缀即可使用，但在极少数老旧浏览器中可能存在兼容性问题，需要根据项目适配范围决定是否使用。
FlexboxGrid_LayoutCSS布局弹性盒子网格布局修改时间：2026-07-23 06:15:23