所谓的圣杯，双飞翼布局

最近刷掘金时，遇到了两个熟悉的词：圣杯布局，双飞燕布局。乍一看：哇，这是啥布局，好高端的样子，之前没见过哎！当了解其意思之后，才发现呵呵哒～

让我们来看一下网上有关这两个词的解释：

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀），圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师（传说是玉伯）改进并传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

三列布局，中间宽度自适应，两边定宽
中间栏要在浏览器中优先展示渲染
允许任意列的高度最高

有点专业，直接翻译成需求就是：

针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。

<div class="container"> 
    <div class="main">main</div> 
    <div class="left">left</div> 
    <div class="right">right</div> 
</div>

让我们抛开所谓的骚气的布局名称与定义，直接就需求展开coding!

1 相对布局

.container {
    width: 100%;
    min-height: 300px;
    padding: 0 60px;
    box-sizing: border-box;
}
.container > div {
    position: relative;
    float: left;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.left {
    left: -60px;
    margin-left: -100%;
}
.right {
    right: 0;
    margin-right: -100%;
}
.main {
    width: 100%;
    height: 100%;
}

这种方式是relative与float相结合，利用float平铺div，relative与margin来调整具体的位置

2 flex布局

.container {
    width: 100%;
    min-height: 300px;
    display: flex;
}
.main {
    flex-grow: 1;
}
.left {
    order: -1;
    flex-basis: 60px;
}
.right {
    flex-basis: 60px;
}

flex大法好，简便快捷，当然会存在浏览器兼容的问题，看具体要求啦～

3 绝对布局

.container {
    width: 100%;
    min-height: 300px;
    position: relative;
}
.container > div {
    position: absolute;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.main {
    width: calc(100% - 120px);
    height: 100%;
    left: 60px;
}
.left {
    left: 0;
}
.right {
    right: 0;
}

哼哼，没有什么布局是绝对布局搞不定的～

直接看需求的话，其实所谓的圣杯，双飞翼布局就是一个简单的html布局的问题，恁要整出这么骚气的名称（难道程序员都很骚气吗0.0），看着挺高端，其实就是纸老虎一个，不要被它吓到～