所谓的圣杯，双飞翼布局

圣杯与双飞燕布局

最新推荐文章于 2022-02-24 20:24:02 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b20c742f265da6e5a2064ff

本文介绍圣杯布局与双飞燕布局的概念及其三种实现方法：相对布局、Flex布局和绝对布局。这两种布局方式旨在解决三列左右栏固定、中间栏自适应的网页布局问题。

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

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

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀），圣杯布局是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），看着挺高端，其实就是纸老虎一个，不要被它吓到～