在前端开发的江湖里，Flexbox和Grid就像两位顶尖高手，一个擅长"凌波微步"（一维布局），一个精通"乾坤大挪移"（二维布局）。新手常问："到底该练哪门武功？"今天咱们不玩玄学，用10个真实开发场景带你看清：谁才是你项目里的"布局王者"！

一、先搞懂核心差异：一维 vs 二维

简单说，Flexbox是"排队高手"，只能管好一行或一列的元素排列；Grid是"表格大师"，能同时控制行和列的布局。就像搭积木：Flexbox只能摆成一条直线，Grid却能搭出立体城堡。

Flexbox与Grid核心差异示意图

左：Flexbox一维布局（只能控制横向/纵向）；右：Grid二维布局（同时控制行列）

二、10个经典场景，实战见真章

场景1：导航栏（横向排列+两端对齐）

需求：顶部导航栏，左侧Logo、中间菜单、右侧登录按钮，要求在手机上自动换行。

选Flexbox！

Flexbox天生擅长"一行排开"，justify-content: space-between轻松实现两端对齐，flex-wrap: wrap自动适配手机屏幕。

// css
.nav {
display: flex;
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中 */
flex-wrap: wrap; /* 手机端自动换行 */
gap: 15px; /* 元素间距 */
}

Flexbox导航栏示例

用Flexbox实现的导航栏，在手机上自动换行，菜单不会挤成一团

场景2：垂直居中（让元素在容器正中间）

需求：登录按钮里的文字垂直居中，或者弹窗里的表单上下左右居中。

选Flexbox！

以前用margin: auto+定位搞半天，Flexbox两行代码搞定：

// css
.box {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

Flexbox垂直居中示意图

紫色容器内的5个方块，通过Flexbox的align-self属性实现不同垂直对齐方式

场景3：卡片列表（响应式网格，每行3个）

需求：商品列表，PC端一行3个卡片，平板2个，手机1个，卡片高度不固定。

选Grid！

Grid的repeat(auto-fill, minmax(250px, 1fr))是响应式神器，自动计算每行能放几个卡片，不用写媒体查询！

// css
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自动适配列数 */
gap: 20px; /* 间距 */
}

*如果用Flexbox，得算calc(33.333% - 16px)，还要写媒体查询改宽度，麻烦！*

场景4：整体页面布局（头部+侧边栏+内容+底部）

需求：经典后台管理页面，顶部导航（高80px）、左侧侧边栏（宽250px）、主内容区、底部版权栏。

选Grid！

Grid能像"画表格"一样定义区域，grid-template-areas直接给区块命名，清晰到爆：

// css
.page {
display: grid;
grid-template-columns: 250px 1fr; /* 侧边栏250px，内容区占剩余 */
grid-template-rows: 80px 1fr 50px; /* 头部80px，内容区占剩余，底部50px */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Grid整体布局示例

用Grid划分的页面区块，每个区域位置一目了然，修改时只需改grid-template-areas

场景5：按钮组（平均分配空间）

需求：表单底部的"取消"和"提交"按钮，要占满容器宽度，且宽度相等。

选Flexbox！

给按钮加flex: 1，自动平分父容器空间，新增按钮也不用改代码：

// css
.btn-group {
display: flex;
gap: 10px;
}
.btn {
flex: 1; /* 平分空间 */
padding: 10px;
}

如果用Grid，得写grid-template-columns: repeat(2, 1fr)，按钮数量变了还要改列数，不够灵活。

场景6：复杂仪表盘（多元素不规则排列）

需求：数据仪表盘，有占2行1列的图表、占1行2列的统计卡、还有小的状态标签，位置要精确对齐。

选Grid！

Grid支持"跨行跨列"，用grid-column: span 2或grid-row: span 2轻松实现元素合并，就像Excel合并单元格：

// css
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4列 */
grid-template-rows: repeat(3, 150px); /* 3行，每行150px */
gap: 15px;
}
.chart {
grid-column: 1 / 3; /* 占1-3列（2列宽） */
grid-row: 1 / 3; /* 占1-3行（2行高） */
}
.stats {
grid-column: 3 / 5; /* 占3-5列（2列宽） */
}

场景7：动态内容列表（数量不固定，高度不一）

需求：用户评论列表，评论内容长短不一，需要自适应高度，保持整洁排列。

选Flexbox！

Flexbox对子元素高度不敏感，flex-direction: column让元素垂直排列，高度自动撑开，不会出现Grid那样的"空白缝隙"。

// css
.comment-list {
display: flex;
flex-direction: column; /* 垂直排列 */
gap: 15px;
}
.comment {
padding: 15px;
border: 1px solid #eee;
}

场景8：图片瀑布流（宽度固定，高度不一）

需求：类似Pinterest的图片墙，图片宽度固定，高度随内容变化，自动向上填充缝隙。

选Grid！

Grid Level 2的grid-template-rows: masonry是瀑布流原生解决方案（目前Chrome/Firefox支持），不用JS库了！

// css
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, 200px); /* 列宽200px */
grid-template-rows: masonry; /* 瀑布流布局 */
gap: 10px;
}

如果用Flexbox，得手动算高度，或者用JS调整位置，麻烦到哭！

场景9：混合布局（整体框架+组件内部）

需求：电商商品页，整体用Grid分"左侧商品图+右侧信息区"，右侧信息区里的"价格+按钮+规格"用Flexbox垂直排列。

混合使用！

Grid搭骨架，Flexbox填细节是黄金搭档：

// css
/* Grid整体布局 */
.product-page {
display: grid;
grid-template-columns: 1fr 1fr; /* 左右两列 */
gap: 30px;
}
/* Flexbox组件内部 */
.info {
display: flex;
flex-direction: column; /* 垂直排列 */
gap: 20px;
}
.price { font-size: 24px; }
.buttons { display: flex; gap: 10px; } /* 按钮横向排列 */

混合布局示例

左侧Grid分区域，右侧Flexbox排列内部元素，各司其职

场景10：性能敏感场景（动态更新内容）

需求：聊天APP消息列表，频繁新增/删除消息，需要流畅不卡顿。

选Flexbox！

根据BrowserBench测试，Flexbox动态更新性能比Grid快15%，因为它只有一维计算，浏览器渲染压力小。

// css
.messages {
display: flex;
flex-direction: column-reverse; /* 新消息在底部 */
gap: 10px;
overflow-y: auto;
}

三、终极选择指南：3秒判断用谁

四、记住：它们是队友，不是对手！

别纠结"必须选一个"！Grid适合宏观布局（页面框架），Flexbox适合微观布局（组件内部），就像盖房子：Grid是钢筋骨架，Flexbox是内部装修。

看看Netflix、Airbnb这些大厂，都是两者混用——用Grid搭页面框架，Flexbox对齐按钮和文字，既高效又灵活。

最后送你一句口诀："一维排队用Flex，二维网格用Grid，复杂布局混着使"，从此布局难题都是弟弟！