圣杯布局（双飞翼）

利用flex实现两边固定，中间随着浏览器宽度变化而变化的布局。 

代码部分

css部分

            .box{display:flex;}
            .box1{
                width: 200px;
                height: 500px;
                background: red;
            }
            .box2{
                height: 530px;
                background: orange;
                flex:1;
            }
            .box3{
                width: 200px;
                height: 500px;
                background: red;
            }

body部分

<!--圣杯布局-->
        <div class="box">
            <div class="box1">左</div>
            <div class="box2">中</div>
            <div class="box3">右</div>
        </div>