不知道大家有没有发现，我们平时刷的新闻网页、个人博客，主体结构全是经典三栏。为实现这个常用页面结构，前端从inline-block磕磕碰碰到position精准定位，最后Flex直接简化全流程。从老式兼容写法到现代响应式Flex，顺着代码拆解三栏布局的进化路程！！！
首先，什么是经典三栏布局？？？
经典三栏布局是网页最常用的页面排版结构，页面横向划分为左侧侧边栏、中间主体内容区、右侧侧边栏三个板块。
而实现三栏布局则有三种方式：inline-block、position定位、flex弹性布局。
①方式一：inline-block实现三栏
实现思路：元素转为行内块并排
痛点：标签换行带来空白缝隙、高度对齐难、移动端适配麻烦（早年前端常用，现在逐渐淘汰）
代码示例解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!– 设置视口，适配移动端 –>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>经典三列布局：通过display改变元素性质来实现</title>
<style>
/* 全局初始化，清除所有元素默认的内外边距 */
* {
margin: 0;
padding: 0;
}
/* 顶部导航栏样式 */
#navigator {
/* 宽度占满整个屏幕 */
width: 100%;
/* 导航栏高度 */
height: 30px;
/* 背景颜色：橙色 */
background-color: orange;
/* 文字水平居中 */
text-align: center;
}
/* 中间内容区域总容器 */
#content {
/* 宽度占满整个屏幕 */
width: 100%;
/* 内容区域高度 */
height: 800px;
}
/* 左侧红色栏 */
#div1 {
/* 宽度占父容器的10% */
width: 10%;
/* 高度占父容器的100% */
height: 100%;
/* 背景颜色：红色 */
background-color: red;
/* 将块级元素转为行内块元素，实现横向并排 */
display: inline-block;
}
/* 中间绿色栏（核心） */
#div2 {
/*
重要说明：
正常三列总和应为 10% + 80% + 10% = 100%
但是 display: inline-block 元素(行内块元素)之间，
默认规则是HTML代码中的换行、空格会被浏览器解析成一个空白间隙
所以必须把宽度从 80% 缩小为 79%，腾出空间给这个空白间隙
否则三列总宽度会超出100%，导致第三列被挤到下一行
*/
width: 79%;
/* 高度占父容器的100% */
height: 100%;
/* 背景颜色：绿色 */
background-color: green;
/* 将块级元素转为行内块元素，实现横向并排 */
display: inline-block;
}
/* 右侧蓝色栏 */
#div3 {
/* 宽度占父容器的10% */
width: 10%;
/* 高度占父容器的100% */
height: 100%;
/* 背景颜色：蓝色 */
background-color: blue;
/* 将块级元素转为行内块元素，实现横向并排 */
display: inline-block;
}
/* 底部页脚样式 */
#footer {
/* 宽度占满整个屏幕 */
width: 100%;
/* 页脚高度 */
height: 30px;
/* 背景颜色：橙色 */
background-color: orange;
/* 文字水平居中 */
text-align: center;
}
</style>
</head>
<body>
<!– 顶部导航栏 –>
<div id="navigator">网页导航栏</div>
<!– 中间三列内容区域 –>
<div id="content">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<!– 底部页脚 –>
<div id="footer">网页页脚</div>
</body>
</html>
运行结果截图：
②方式二：position定位实现三栏
实现思路：左右绝对定位、中间预留边距
痛点：脱离文档流，父容器高度塌陷、内容溢出布局崩坏
代码示例解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>经典三列布局：position定位实现</title>
<style>
/* 全局初始化，清除所有元素默认的内外边距 */
* {
margin: 0;
padding: 0;
}
#navigator {
width: 100%;
height: 30px;
background-color: orange;
text-align: center;
}
#content {
width: 100%;
height: 800px;
/* 父容器设置相对定位，作为子元素绝对定位的参考基准 */
position: relative;
}
#div1 {
width: 10%;
height: 100%;
background-color: red;
/* 设置绝对定位，固定在父容器左侧 */
position: absolute;
/* 距离父容器左侧0像素 */
left: 0;
/* 距离父容器顶部0像素 */
top: 0;
}
#div2 {
width: 80%;
height: 100%;
background-color: green;
/* 设置绝对定位，位于左侧栏右边 */
position: absolute;
/* 距离父容器左侧10%（刚好在左侧栏后面） */
left: 10%;
/* 距离父容器顶部0像素 */
top: 0;
}
#div3 {
width: 10%;
height: 100%;
background-color: blue;
/* 设置绝对定位，固定在父容器右侧 */
position: absolute;
/* 距离父容器右侧0像素 */
right: 0;
/* 距离父容器顶部0像素 */
top: 0;
}
#footer {
width: 100%;
height: 30px;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div id="navigator">网页导航栏</div>
<div id="content">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="footer">网页页脚</div>
</body>
</html>
运行结果截图：
③方式三：flex弹性布局实现三栏
实现思路：父盒子display:flex+flex-wrap:wrap,子项百分比分配宽度，自动实现大屏并排小屏换行响应。
优点：无空白、不脱标、天然适配移动端，当下主流写法
痛点：低版本IE兼容差
代码示例解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex实现三列布局</title>
<style>
/* 全局初始化，清除默认内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 导航栏样式 */
#navigator {
width: 100%;
height: 40px;
background-color: orange;
text-align: center;
line-height: 40px;
}
/* 内容容器：Flex布局核心 */
#content {
width: 100%;
min-height: 500px;
/* 开启Flex布局 */
display: flex;
}
/* 左侧栏 */
#div1 {
background-color: red;
/* 电脑端宽度 */
width: 10%;
}
/* 中间内容栏 */
#div2 {
background-color: green;
/* 电脑端宽度 */
width: 80%;
}
/* 右侧栏 */
#div3 {
background-color: blue;
/* 电脑端宽度 */
width: 10%;
}
/* 页脚样式 */
#footer {
width: 100%;
height: 40px;
background-color: orange;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div id="navigator">网页导航栏</div>
<div id="content">
<div id="div1">左侧栏</div>
<div id="div2">中间内容</div>
<div id="div3">右侧栏</div>
</div>
<div id="footer">网页页脚</div>
</body>
</html>
运行结果截图：
了解了上面的前端知识，你们是不是很好奇flex弹性布局在不同设备中会是什么样的响应呢？比如PC、平板、手机三种屏幕呈现的效果。接下来，我们就来详细的讲它的效果。同时，这也是Flex响应特性最直观的体现！！
1.PC端（屏幕>=1200px）
若默认不换行，宽度富余，三个盒子平分剩余空间，均匀三栏并排铺满整行，布局工整，标准三列效果。若设置自动换行，每项基准30%，一行刚好放下三个，剩余空间均分，保持一行三列。
2.平板端（屏幕768px~1200px）
若默认不换行，整体可视宽度变小，没有多余空白，栏目整体同步缩窄，文字变紧凑，但依旧保持三列同行。若设置自动换行，屏幕宽度不足以容纳3个30%宽度元素，自动换行，一行两列，第三个单独换行。
3.手机端（屏幕<768px）
若默认不换行，横向空间严重不够，Flex自动压缩盒子宽度，文字挤压变形；设置禁止压缩，则页面直接横向溢出、出现横向滚动条，三栏布局失效。若设置自动换行，屏幕极窄，单个元素占满整行，三列垂直堆叠，从上到下单列排列。
代码示例解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex响应式三列布局</title>
<style>
/* 全局初始化，清除默认内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 导航栏样式 */
#navigator {
width: 100%;
height: 40px;
background-color: orange;
text-align: center;
line-height: 40px;
}
/* 内容容器：Flex布局核心 */
#content {
width: 100%;
min-height: 500px;
/* 开启Flex布局 */
display: flex;
/* 允许自动换行，响应式必备 */
flex-wrap: wrap;
}
/* 左侧栏 */
#div1 {
background-color: red;
/* 电脑端宽度 */
width: 10%;
}
/* 中间内容栏 */
#div2 {
background-color: green;
/* 电脑端宽度 */
width: 80%;
}
/* 右侧栏 */
#div3 {
background-color: blue;
/* 电脑端宽度 */
width: 10%;
}
/* ==================== 响应式区间 ==================== */
/* 平板端：宽度≤768px，不改变顺序，左右自动并排 */
@media (max-width: 768px) {
/* 左侧占一半宽度 */
#div1 {
width: 50%;
}
/* 中间占满整行，自动换行 */
#div2 {
width: 100%;
}
/* 右侧占一半宽度，自动跟上一行剩余位置 */
#div3 {
width: 50%;
}
}
/* 手机端：宽度≤480px，全部单列 */
@media (max-width: 480px) {
#div1,#div2,#div3 {
width: 100%;
}
}
/* 页脚样式 */
#footer {
width: 100%;
height: 40px;
background-color: orange;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div id="navigator">网页导航栏</div>
<div id="content">
<div id="div1">左侧栏</div>
<div id="div2">中间内容</div>
<div id="div3">右侧栏</div>
</div>
<div id="footer">网页页脚</div>
</body>
</html>
什么都有结束的时刻。今天我们就学到这里，下次再见哦！都是干货，好好学习，天天向上！！！
