CSS经典布局之双飞燕布局

CSS经典布局之双飞翼 布局

双飞翼就是两边不变中间伸缩，看淘宝就知道了

第一种实现方法:flex布局

css代码

 .content{
            display: flex;
        }
        .content-left{
            flex: 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .content-middle{
            flex: 1;
            width: 100%;
            height: 200px;
            background-color: green;
            min-width: 700px;
        }
        .content-right{
            flex: 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }

HTML代码：

<div class="content">
        <div class="content-left">left</div>
        <div class=&