双飞翼布局

双飞翼布局

一、什么是双飞翼布局

双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。一起来看看淘宝的头部实现：就是两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。

 

二、HTML布局

首先设置一个container容器，里面放置左中右三个盒子，父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染。

<div class="container">
    <div class="middle">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

三、每个盒子的样式

首先是容器设置高度，三个盒子设置左浮动，两侧盒子固定宽度，中间盒子设置100%

.container{ height:200px;}
.middle{width: 100%;height: 200px; background-color: #ffbcec;float:left;}
.left{ width: 200px;height: 200px;background-color: #ffe86c;float:left;}
.right{width: 200px;height: 200px;background-color: #f01b2d;float:left;}

这个时候可以看到效果图为

 

现在因为中间盒子设置了100%的宽度，左边和右边的盒子就掉下来了。

那么怎么才能让三个盒子并列一行呢？这个时候就要利用到负边距了。

四、利用负边距并行

左边的盒子设置.left {margin-left:-100%;}

右边的盒子设置.right {margin-left：-200px;}

 

现在看起来好像已经成功了。但是要记住，中间盒子是自适应的宽度，所以中间盒子里的内容会被左右盒子给压住一部分。
比如我在中间的盒子里加文字，就会出现如下的情况

 

五、父级盒子内边距

利用父级元素设置左右内边距的值，把父级的三个子盒子往中间挤。

代码如下：.container{ padding: 0 200px;} 这里的200px是左右盒子的宽度。
效果如下：

 

哎呀，此时可以看到中间的盒子是不占两侧位置了，可是设置了padding后，左右盒子也跟着过来了，那怎么才让左右贴边呢？

六、相对定位

给左右两个盒子加一个定位，加了定位之后左右两个盒子就可以设置left和right值。代码如下：
.left{ position: relative; left: -200px;}
.right{position: relative;right: -200px;

 

现在，双飞翼终于实现了，中间的内容也不会超出了，缩小浏览器后的效果图如下

 

七、flex布局实现
 
接下来讲一下此实例的具体实现： 
1.首先将container块设置为一个Flex容器

.container {
    display: flex;
    overflow: hidden;
    height: 200px;
}

 

那么container下属的main、left和right这三个子元素自动成为容器成员，称为 Flex 项目（flex item） 
3.通过order属性设置排列顺序

可以看出三个项目的排序方式不一样了，main排在了第一个，要让main在中间，left在左边，可以通过Flex容器下的项目的属性“order”属性来设置：

.left {
    order: -1;
    background-color: #ffe86c;
}

 

对于order属性：定义项目的排列顺序，越小越靠前，默认为0。

４.通过项目属性flex：1，将空余的空间用main来填充，使三个项目不满一整行；默认为0，也就是对剩余空间不做处理。可别忘了flex兼容性比较差，记得要把该加的浏览器兼容方案都加上去。

-moz-box-flex:1.; /* Firefox */
-webkit-box-flex:1.; /* Safari 和 Chrome */
flex: 1;

5.通过项目属性flex-basis 设置left和right的固定宽度

.left {
    order: -1;
    flex-basis:200px;
    background-color: #ffe86c;
}
.right {
    flex-basis:200px;
    background-color: #f01b2d;
}

这样就实现了我们的目标，是不是很简单？这就是flex布局的魅力。。。

八、绝对定位实现

1、首先给父级设置relative，三个盒子都设置绝对定位并且top值为0，左侧和右侧盒子分别设置left和right为0。

.left {
    position: absolute;
    left: 0;
    width:200px;
    background-color: #ffe86c;
}
.right {
    position: absolute;
    right: 0;
    width:200px;
    background-color: #f01b2d;
}

但是这是你会发现如下图

 

高度没有了！这是因为绝对定位脱离了文档流，父级的高度管不了它们了，所以我们需要给三个盒子都设置高度

.middle,.left,.right{
    top: 0;
    height: 200px;
}

然后就成功啦

九、比较总结

负外边距和绝对定位会有些问题就是当窗口小于两侧盒子固定宽度时，显示就会不全。flex布局就可以很好的让两侧固定宽带减少已达到自适应。但是flex方法毕竟兼容性差，ie10以上才能用。

flex布局和grid布局是趋势，也在蓬勃发展，但新旧事物还是有过度的，学习圣杯布局会让你对盒模型、浮动又更深的理解，也方便自己更灵活的应用。