从无到有的双飞翼！

 双飞翼，长这个样子！

可以把他们想象成一只鸟，红色区域是鸟身子，周边两个不同色块的区域是鸟的翅膀。这个布局的最好的一个效果就是中间的宽度是自适应的，但是两边的宽度是定死的！

上代码把，说的好几把累！

首先我们要编写html代码，很简单

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

第2步，我们需要让他们在一行！

       当然，他们不可能一步就到一行了，为了方便理解，我们分成几步，步子迈小点好，怕扯着蛋

      2.1

　　让他们先浮动

　　

<style>
    .fl{float:left}
</style>

<div class="wrap">
    <div class="main fl"></div>
    <div class="left fl">left</div>
    <div class="right fl">right</div>
</div>

　　为了更好的观察，我们给他们一点样式，因为中间的一块div宽度是自适应的，我们先给他width:100%

*{margin: 0;padding: 0}
    .wrap div{height: 200px}
        .fl{
            float: left;
        }
        .main{
　　　　　　　width：100%；
            background: red;
        }
        .left{
            width: 200px;
            background: green;
        }
        .right{
            width: 200px;
            background: pink;
        }
    </style>

   <div class="wrap">
        <div class="main fl"></div>
        <div class="left fl">left</div>
        <div class="right fl">right</div>
    </div>

 　　这个时候，可以看到，效果是这个样式

 

好了，气氛有点尴尬了，说好的双飞翼，怎么最左的一块自适应，不是中间的一块left自适应！稍等，等我们走起路来看2.2步就明白了

　　　2.2

　　这个就厉害了，好好看，为了让Left这个绿色方块到上面一层最左边，right这个粉红色方块到上面一层的最右边，我们需要使用margin-left负值这个操蛋的玩意，left需要margin-left=-100%;right需要margin-right=-200px

　　上效果

　　

但是这样其实中间的红色区域并不是自适应，他的宽度是100%，但是他们的左右边都被right 和left 遮盖住了，这可咋办呀

　　2.3祭出最后一步

　　在红色maindiv中间加入div mian-box，并且给他对应的margin-left:左边left的div宽度，margin-right:右边div的right的宽度

上代码走一波

<style>
    *{margin: 0;padding: 0}
    .wrap div{height: 200px}
        .fl{
            float: left;
        }
        .main{
            width: 100%;
            background: red;
        }
        .left{
            width: 200px;
            background: green;
            margin-left: -100%
        }
        .right{
            width: 200px;
            background: pink;
            margin-left: -200px;
        }
        .main-box{
            margin: 0 200px 0 200px;
        }
    </style>

    <div class="wrap">
        <div class="main fl">
            <div class="main-box">mian-box</div>
        </div>
        <div class="left fl">left</div>
        <div class="right fl">right</div>
    </div>

这样，一个双飞燕就大功告成了。但是，这是一种复杂的方式，还有一种比较简单的方式(这种方式是我自己瞎鼓捣出来的，不知道有没有大神使用过这个方法，不知道算不算自己的小想法！)，使用弹性盒子的特点来完成双飞燕的效果，这样理解起来比较容易，代码量也很少，但是很多的浏览器并支持就让人很尴尬了，具体什么浏览器不支持呢？只要不支持弹性盒子这个属性的浏览器，他都不支持这个布局方式，不bb了，直接给代码

    <style>
    .big{
        display: flex;
    }
    .big>div{
        height: 200px;
    }
    .left,.right{
        width: 200px;
        background: red
    }

    .center{
        flex: 1;
        background: pink
    }

    </style>

<div class="big">
    <div class="left"></div>
    <div class="center">ss</div>
    <div class="right"></div>
</div>