做网页时想把内容分成左右两栏（比如侧边栏 + 正文），或左中右三栏（比如 GitHub 页面）？不用学复杂的老方法，今天教你两个 “偷懒神器”——Flex 和 Grid，代码少、好理解，新手也能一次搞定！
一、先明确：两栏和三栏布局是啥？
不管用哪种方法，核心需求都很简单：
- 两栏布局：一窄一宽，窄的固定宽度（比如侧边栏 200px），宽的跟着屏幕变（比如正文占满剩下的地方）；
- 三栏布局：左窄、中宽、右窄，左右固定宽度，中间占满剩下的地方。
二、用 Flex 布局：灵活又好调（新手首选）
Flex 就像 “弹性绳子”，能让盒子跟着屏幕 “伸缩”，两栏、三栏都能轻松实现，关键是给父盒子加 display: flex。
1. Flex 实现两栏布局（侧边栏 + 正文）
需求：左边侧边栏固定 200px，右边正文占满剩下的地方，还能留 10px 空隙。
代码直接抄：
css
<style>
/* 父盒子：开Flex模式 */
.two-column {
display: flex; /* 关键！开启Flex布局 */
gap: 10px; /* 左右盒子之间留10px空隙（不用算margin了） */
}
/* 左边：固定宽度 */
.sidebar {
width: 200px; /* 固定200px，不随屏幕变 */
background: #f0f0f0;
height: 400px; /* 随便设个高度，方便看效果 */
}
/* 右边：占满剩下的地方 */
.content {
flex: 1; /* 关键！剩下的空间全给它 */
background: #fff;
height: 400px;
}
</style>
<!-- HTML结构：先左后右 -->
<div class="two-column">
<div class="sidebar">左边侧边栏（固定200px）</div>
<div class="content">右边正文（跟着屏幕变宽）</div>
</div>
小技巧：
如果想让左右盒子高度 “不一样”（默认会等高），给父盒子加一句 align-items: flex-start 就行。
2. Flex 实现三栏布局（左栏 + 中间 + 右栏）
需求：左边 200px、右边 150px（固定宽度），中间占满剩下的地方，三栏之间各留 10px 空隙。
代码直接抄：
css
<style>
/* 父盒子：开Flex模式 */
.three-column {
display: flex; /* 关键！开启Flex布局 */
gap: 10px; /* 三栏之间各留10px空隙 */
}
/* 左右：固定宽度 */
.left {
width: 200px;
background: #f0f0f0;
height: 300px;
}
.right {
width: 150px;
background: #f0f0f0;
height: 300px;
}
/* 中间：占满剩下的地方 */
.middle {
flex: 1; /* 关键！剩下的空间全给它 */
background: #fff;
height: 300px;
}
</style>
<!-- HTML结构：左→中→右 -->
<div class="three-column">
<div class="left">左栏（固定200px）</div>
<div class="middle">中间内容（跟着屏幕变宽）</div>
<div class="right">右栏（固定150px）</div>
</div>
灵活调整：
如果想让 “中间内容优先加载”（网速慢时先出来），可以在 HTML 里先写中间，再用 order 调整显示顺序，比如：
css
.left { order: 1; } /* 显示在最左 */
.middle { order: 2; } /* 显示在中间 */
.right { order: 3; } /* 显示在最右 */
三、用 Grid 布局：像 “画表格” 一样简单
Grid 就像 “网格纸”，直接给父盒子定义 “几行几列”，适合更规整的布局，三栏布局用它尤其方便。
1. Grid 实现两栏布局（侧边栏 + 正文）
需求：左边固定 200px，右边占满剩下的地方，留 10px 空隙。
代码直接抄：
css
<style>
/* 父盒子：开Grid模式，定义两列 */
.two-column-grid {
display: grid; /* 关键！开启Grid布局 */
/* 定义两列：第一列200px，第二列占满剩下的（auto），中间留10px gap */
grid-template-columns: 200px 1fr;
gap: 10px; /* 两栏之间留10px空隙 */
height: 400px; /* 父盒子高度，方便看效果 */
}
/* 左右盒子：不用设宽度，父盒子已经定义好了 */
.sidebar-grid {
background: #f0f0f0;
}
.content-grid {
background: #fff;
}
</style>
<!-- HTML结构：左→右 -->
<div class="two-column-grid">
<div class="sidebar-grid">左边侧边栏（固定200px）</div>
<div class="content-grid">右边正文（跟着屏幕变宽）</div>
</div>
（注：1fr 就是 “剩余空间的 1 份”，和 Flex 的 flex:1 效果一样）
2. Grid 实现三栏布局（左栏 + 中间 + 右栏）
需求：左边 200px、右边 150px，中间占满剩下的地方，留 10px 空隙。
代码直接抄：
css
<style>
/* 父盒子：开Grid模式，定义三列 */
.three-column-grid {
display: grid; /* 关键！开启Grid布局 */
/* 定义三列：左200px，中auto（占满），右150px，列之间留10px gap */
grid-template-columns: 200px 1fr 150px;
gap: 10px; /* 三栏之间留10px空隙 */
height: 300px; /* 父盒子高度 */
}
/* 三个盒子：不用设宽度，父盒子已经定义好了 */
.left-grid {
background: #f0f0f0;
}
.middle-grid {
background: #fff;
}
.right-grid {
background: #f0f0f0;
}
</style>
<!-- HTML结构：左→中→右 -->
<div class="three-column-grid">
<div class="left-grid">左栏（固定200px）</div>
<div class="middle-grid">中间内容（跟着屏幕变宽）</div>
<div class="right-grid">右栏（固定150px）</div>
</div>
超简单调整：
如果想改宽度，直接改 grid-template-columns 里的数值就行，比如想让左边变 250px，右边变 180px，只需要改：
css
grid-template-columns: 250px 1fr 180px;
四、总结：Flex 和 Grid 该选哪个？
| 场景 | 选 Flex 还是 Grid？ | 核心优势 |
|---|---|---|
| 两栏布局 | 都可以（Flex 更常用，代码略少） | Flex 灵活，Grid 更规整 |
| 三栏布局 | 优先 Grid（一行代码定义列宽，更简单） | 直接 “画网格”，不用算 flex 值 |
| 需要灵活调整 | 选 Flex（比如调整盒子顺序、单独改某个盒子） | 有 order、align-self 等属性 |
| 规整的多列布局 | 选 Grid（比如四栏、五栏，或有行有列的布局） | 直接定义行列，不用嵌套 |
其实不用纠结，两种方法都简单！现在打开代码编辑器，把上面的代码复制进去，改改颜色、宽度，试两次就能熟练 —— 网页分栏布局，真的没你想的那么难！
