持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情
上文实现了双栏布局，是比较简单的，那么三栏布局呢？也是面试和开发常常遇到的。那么，本文就开始总结关于三栏布局的最常见的双飞翼布局，圣杯布局和flex布局这三种种方法及特点。
双飞翼布局
双飞翼布局是所有元素设置浮动。中间元素内部创建子元素，子元素设置margin,用来预留左右两侧元素的位置。左右元素设置margin负值。
代码如下：
<style>
.main,.left,.right{
float: left;
}
.main{
width: 100%;
}
.content{
margin:0 200px;
}
.left{
width: 200px;
margin-left: -100%;
}
.right{
width: 200px;
margin-left: -200px;
}
</style>
<body>
<div class="main"><div class="content">主页</div></div>
<div class="left">左部</div>
<div class="right">右部</div>
</body>
缺点：这个相比于其他布局，需要在main元素创建子元素，增加了dom节点，加大了渲染树生成的计算量。
圣杯布局
圣杯布局和双飞翼有一点点类似之处，但是圣杯布局是父元素使用padding预留左右两侧元素的位置，左中右元素均设置浮动，左侧元素使用margin负值和相对定位调整位置，右侧元素用margin负值调整位置
代码如下：
<style>
.middle,.left,.right{
float: left;
}
.main{
padding:0 200px;
}
.middle{
width: 100%;
}
.left{
width: 200px;
margin-left: -100%;
position:relative;
right: 200px;
}
.right{
width: 200px;
margin-right: -200px;
}
</style>
<body>
<div class="main">
<div class="middle">主页</div>
<div class="left">左部</div>
<div class="right">右部</div>
</div>
</body>
缺点：中间部分宽度小于左侧时，布局混乱
总结：圣杯和双飞翼最明显的区别，在main内部使用的是margin，而圣杯是直接在container部分使用padding。同时要注意的是，圣杯布局和双飞翼布局的元素顺序是需要按照中间元素位于开头。
flex布局
flex布局的话较为简单，除了需要考虑浏览器是否支持flex布局,不过目前大部分浏览器均支持，是比较推荐的一种实现三栏布局的方式。只需要将父元素设置为flex布局，由于flex默认方向属性是水平的，故直接实现三栏布局。最后根据所需位置，大小编写即可。无需要考虑元素顺序。
<style>
*{
margin: 0;
padding:0;
}
.main{
display: flex;
}
.middle{
flex:1;
}
.left,.right{
width: 200px;
}
</style>
<body>
<div class="main">
<div class="left">左部</div>
<div class="middle">主页</div>
<div class="right">右部</div>
</div>
</body>
其他
实现三栏布局还可以考虑其他方法，如以下几种。
- 浮动法
中间元素放最后，左右元素任意排列，并且左侧元素左浮动，右侧元素右浮动。
-
绝对定位
左右元素设置为绝对定位，中间元素使用margin预留左右元素的宽度
-
网格布局
中间元素位于左右两个元素之间，父元素设置网格布局，使用grid-template-rows定义行高，使用grid-template-columns定义列宽。
