css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等
丶Serendipity丶 人气:0
1.前言
作为一个前端开发人员，工作学习中经常会遇到快速构建网页布局的情况，这篇我整理了一下我知道的一些方法。我也是第一次总结，包括圣杯布局，双飞翼布局，table-cell布局都是第一次听说，可能会有需要修改的地方请谅解。三栏布局顾名思义，就是左右两侧宽高固定，中间一列居中切随着浏览器页面变化。下面来看下具体的实现方法：
2.具体实现方法
实现效果如下：
（1）绝对定位方法
<div class="box">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
.box {
border: 1px solid red;
height: 200px;
position: relative;
overflow: hidden;
}
.main {
background-color: springgreen;
position: absolute;
left: 150px;
right: 150px;
top: 0px;
bottom: 0px;
}
.left {
background-color: tomato;
float: left;
width: 100px;
height: 200px;
}
.right {
background-color: pink;
float: right;
width: 100px;
height: 200px;
}
总结：绝对定位方法其实就是首先给父盒子设置position：relative和overflow:hidden,然后分别左右两个盒子向两边设置浮动，中间的盒子使用绝对定位并设置其相对父元素左右的间隔使得把中间盒子两边撑开，最后设置中间盒子的top和bottom值把其高度撑开。
（2）圣杯布局
说圣杯布局之前先来了解下什么是圣杯布局，首先看见这个名字，圣杯，其实就是我们饮酒的那个杯子，最主要的特点，分为上中下三个部分，这就不难想到我们平常遇到的网页也是属于这个结构的，顶部一般的导航栏，搜索框了，中间一般分两三个部分了，占中间位置的主题内容，两边的小标题区域了，排行榜区域了，等等，这里我们所说的圣杯布局主要针对中间三部分来使用一下。这种方式使得中间盒子最先渲染出来。
<div class="box">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
.box {
border: 1px solid red;
overflow: hidden;
padding: 0 200px;
}
.main {
width: 100%;
height: 200px;
position: relative;
float: left;
background-color: springgreen;
}
.left {
background-color: tomato;
position: relative;
float: left;
margin-left: -100%;
left: -200px;
width: 200px;
height: 200px;
}
.right {
background-color: pink;
position: relative;
float: left;
margin-left: -200px;
right: -200px;
width: 200px;
height: 200px;
}
</style>
总结：圣杯布局就是首先把中间盒子放在最前面，然后三栏都设置为浮动并且相对定位，给左右两个盒子设置固定宽度，中间盒子设置100%宽度，此时父盒子宽度被中间盒子占满，左右两个盒子被挤在下面，由于浮动，给左盒子margin-left:-100%使得左侧盒子挤到中间盒子左侧，给右边盒子设置margin-left:-200px;使得右侧盒子在中间盒子右侧，这样就实现了左中右排列，但是此时中间盒子被两侧盒子覆盖，因此需要设置父盒子padding:0 200px;并且给左右两个盒子分别设置left:-200px;right:-200px;（即左右两个盒子分别偏移自身的宽度去覆盖掉中间盒子被挤的那一部分就好了），这样圣杯布局就完成了。但是由于设置了父盒子的padding，当浏览器窗口太小会出现混乱。
（3）双飞翼布局
由于圣杯布局对浏览器最小宽度有限制，经常出现问题，于是双飞翼布局就出现了，专门解决这种bug，下面看下具体实现：
<div class="box">
<div class="wrap">
<div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<style>
.box {
border: 1px solid red;
overflow: hidden;
}
.wrap {
width: 100%;
position: relative;
float: left;
background-color: black;
}
.main{
background-color: springgreen;
margin: 0 200px;
overflow: hidden;
height: 200px;
}
.left {
background-color: tomato;
position: relative;
float: left;
margin-left: -100%;
width: 200px;
height: 200px;
}
.right {
background-color: pink;
position: relative;
float: left;
margin-left: -200px;
width: 200px;
height: 200px;
}
</style>
总结：圣杯布局由于宽度小时出现混乱，双飞翼其实就是给中间的盒子包裹一层，里面的一层通过margin来实现了圣杯布局的padding,具体实现过程前两步相同，首先中间盒子在最前面，并设置了宽度100%，导致中间的盒子占用一整行，然后通过浮动，设置左右两边的盒子覆盖在中间盒子上面，从而达到了左中右三个盒子的效果，由于左右两个盒子覆盖在中间盒子上面，需要把真正想要的中间盒子嵌套进去一层，最终得到了双飞翼的效果，浏览器无论怎么变化没再也不用担心混乱问题了。这种方式也使得中间盒子最先渲染出来。
（4）flex布局
flex布局工作中经常用到，对我来说这个时用的最6的一种方式了，毕竟当前使用最多的布局了吧，尤其做移动端开发的，更别说WEEX页面默认flex布局了，你不知道flex布局真的需要去学习了。
<div class="box">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
<style>
.box {
border: 1px solid red;
overflow: hidden;
display: flex;
justify-content: center;
}
.main {
height: 200px;
flex: 4;
background-color: springgreen;
}
.left {
background-color: tomato;
height: 200px;
flex: 1;
}
.right {
background-color: pink;
height: 200px;
flex: 1;
}
</style>
总结：flex布局是一种弹性布局，用来为盒装模型提供最大的灵活性。具体使用请全面学习。
（5）table-cell布局
<div class="box">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
总结：给三栏都设置表格单元display:table-cell，然后分别设置左中右三个盒子宽度，左右盒子：width:200px;中间盒子：width:100%;这时会出现左右两侧盒子被挤到两边，因此分别设置min-width:200px;就解决了这个问题，古纳于这个布局我接触的比较少，今日这么一使用果然方便，日后遇到我得试试。这种布局方式能使得三栏的高度是统一的，但不能使center放在最前面得到最先渲染。
（6）网格布局
<div class="box">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
<style>
.box {
border: 1px solid red;
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 200px auto 200px;
}
.main {
background-color: springgreen;
}
.left {
background-color: tomato;
}
.right {
background-color: pink;
}
</style>
总结：我惊呆了啊，这网格布局如此强大吗？具体实现：设置网格布局，设置三栏高度，设置三栏宽度，中间自适应没两边固定，短短几行代码实现了圣杯双飞翼那么多代码的效果，网格布局如此强大，打开官网才发现，目前还有很多兼容性问题，好吧，只能先练练手了。
3.结束：常见需要手写的布局就这些了，当然你也可以使用第三方的ui库提供的需要布局，但是作为一个前端开发，更注重的还是要会学习一些具体的实现逻辑，而不是只会搬用一下API，模板之类的，希望对看到的人有些许帮助，有错误还请指正，谢谢啦！！如果觉得还不错，请点下关注一起成长啦！
加载全部内容