经常会遇到这样一个场景：
写一个两侧宽度固定，中间宽度自适应的三栏布局。
image
圣杯布局
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body{
min-width: 620px; /* 格外注意：页面的最小宽度 */
}
.middle,
.left,
.right {
position: relative;
float: left;
height: 100%;
}
.container {
padding: 0 220px 0 200px;
overflow: hidden;
}
.left {
/* 关键代码：这里使用负外边距（nagetive margin）将left放置到之前预留出的位置上 */
margin-left: -100%;
left: -200px;
width: 200px;
background: #002496;
}
.right {
margin-left: -220px; /* 关键代码 */
right: -220px;
width: 220px;
background: #ed2738;
}
.middle {
width: 100%;
background: #c0c0d4;
word-break: break-all;
}
</style>
</head>
<body>
<div class='container'>
<div class='middle'>middle</div>
<div class='left'>left</div>
<div class='right'>right</div>
</div>
</body>
</html>
双飞翼布局
基于圣杯布局进行的优化版本：双飞翼布局
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body{
min-width: 620px; /* 页面的最小宽度 */
}
.middle,
.left,
.right {
position: relative;
float: left;
height: 100%;
}
.container {
overflow: hidden;
/* 圣杯布局在container块上加内边距（padding: 0 220px 0 200px;） */
}
.left {
margin-left: -100%;
width: 200px;
background: #002496;
}
.right {
margin-left: -220px;
width: 220px;
background: #ed2738;
}
.middle {
width: 100%;
background: #c0c0d4;
}
.contant{
/* 双飞翼布局将其改为contant块上加外边距（margin: 0 220px 0 200px;） */
margin: 0 220px 0 200px;
}
</style>
</head>
<body>
<div class='container'>
<div class='middle'>
<div class="contant">middle</div>
</div>
<div class='left'>left</div>
<div class='right'>right</div>
</div>
</body>
</html>
- 关于页面最小宽度：
1、要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+220=420px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+200+220=620px；
2、由于双飞翼布局没有用到position:relative进行定位，所以最小页面宽度应该为200+220=420px。
Flex布局
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100%;
}
.left {
background: #002496;
width: 200px;
}
.right {
width: 200px;
background: #ed2738;
}
.middle {
background: #c0c0d4;
flex: 1;
}
</style>
</head>
<body>
<div class='container'>
<div class='left'>left</div>
<div class='middle'>middle</div>
<div class='right'>right</div>
</div>
</body>
</html>
缺点：
flex固有的兼容性问题，根据CanIUse的数据可以总结如下：
IE10部分支持2012，需要-ms-前缀
Android4.1/4.2-4.3部分支持2009 ，需要-webkit-前缀
Safari7/7.1/8部分支持2012， 需要-webkit-前缀
IOS Safari7.0-7.1/8.1-8.3部分支持2012，需要-webkit-前缀
.box{
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
}
.flex1 {
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
}
Grid布局
Grid布局最简单了，两句话搞定，但兼容性堪忧，(>= IE 10)
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
height: 100%;
}
.left {
background: #002496;
}
.right {
background: #ed2738;
}
.middle {
background: #c0c0d4;
}
</style>
</head>
<body>
<div class='container'>
<div class='left'>left</div>
<div class='middle'>middle</div>
<div class='right'>right</div>
</div>
</body>
</html>
面向移动端的话，可以考虑引入grid了，毕竟手机更新换代快，浏览器兼容问题没那么严重。
关于flex与grid布局的选择，要结合起来用才能发挥他们各自的优势，比如：
1、对于居中（特别是垂直居中）问题、还有元素的一维分布（一条线上如何分布），用flex再合适不过了。
2、如果涉及到二维（多行多列）确定的布局，使用Grid。
3、涉及到响应式的页面元素，使用flex + width百分比宽度简直太好用，因为flex天生的流式布局。
