三栏布局是网页设计里非常常见的结构，比如左侧导航、中间内容区、右侧边栏的组合形式。传统用浮动或者定位实现三栏布局，经常要处理清除浮动、高度适配等麻烦问题，而Flexbox弹性布局能更简洁地解决这些痛点，轻松实现灵活的三栏结构。
Flexbox实现三栏布局的核心思路
Flexbox的布局逻辑是把容器设为弹性容器，内部子元素作为弹性项目，通过控制容器的属性和项目的属性来调整排列方式和空间分配。实现三栏布局只需要三步：
- 给外层容器设置
display: flex，开启弹性布局 - 给左右两个侧边栏设置固定宽度，中间内容区设置
flex: 1占据剩余空间 - 根据需要调整侧边栏和中间区域的排列顺序、对齐方式
完整代码示例
下面是可直接运行的Flexbox三栏布局代码，包含基础样式和响应式调整逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox三栏布局示例</title>
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
min-height: 100vh;
}
/* 外层弹性容器 */
.three-col-container {
display: flex;
min-height: 100vh;
}
/* 左侧边栏样式 */
.left-sidebar {
width: 200px;
background-color: #f0f0f0;
padding: 20px;
}
/* 中间内容区样式 */
.main-content {
flex: 1; /* 占据剩余所有空间 */
background-color: #ffffff;
padding: 20px;
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
/* 右侧边栏样式 */
.right-sidebar {
width: 200px;
background-color: #f0f0f0;
padding: 20px;
}
/* 小屏幕适配：屏幕宽度小于768px时改为上下排列 */
@media (max-width: 768px) {
.three-col-container {
flex-direction: column;
}
.left-sidebar, .right-sidebar {
width: 100%;
border: none;
border-bottom: 1px solid #e0e0e0;
}
}
</style>
</head>
<body>
<div class="three-col-container">
<div class="left-sidebar">
<h3>左侧导航</h3>
<ul>
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
</div>
<div class="main-content">
<h2>中间内容区域</h2>
<p>这里是页面的核心内容，会自动占据左右侧边栏之外的所有剩余空间，当内容高度变化时，整个容器会自适应高度。</p>
</div>
<div class="right-sidebar">
<h3>右侧边栏</h3>
<p>可以放置推荐内容、广告或者其他辅助信息。</p>
</div>
</div>
</body>
</html>关键属性说明
代码中用到的几个核心Flexbox属性需要重点理解：
| 属性 | 作用 | 取值说明 |
|---|---|---|
display: flex | 将元素定义为弹性容器，内部子元素自动成为弹性项目 | 只能设置在容器元素上 |
flex: 1 | 弹性项目的扩展属性，等价于flex-grow:1 flex-shrink:1 flex-basis:0% | 设置后项目会占据剩余可用空间，多个项目设置该属性会按比例分配剩余空间 |
flex-direction | 定义弹性项目的排列方向 | 默认row（水平排列），column为垂直排列，响应式场景常用 |
注意事项
- 如果侧边栏内容高度超过中间内容区，弹性容器默认会拉伸所有子元素高度保持一致，不需要额外设置高度
- 如果需要调整三栏的排列顺序，可以给对应子元素设置
order属性，数值越小排列越靠前 - 当中间内容区内容过少时，容器高度可能不会占满整个屏幕，给容器设置
min-height: 100vh可以解决这个问题 - 固定宽度的侧边栏如果需要禁止收缩，可以额外设置
flex-shrink: 0，避免空间不足时被压缩
Flexbox实现三栏布局的代码量远少于传统浮动方案，灵活性和兼容性也更好，目前所有现代浏览器都支持Flexbox相关属性，实际开发中可以直接使用。