左右定宽，中间自适应，实现三列布局

左右定宽，中间自适应，实现三列布局

今天想说的是一个左右定宽，中间自适应，实现三列布局，我也总结了以下，主要有以下几种：
废话不多说，直接上代码：

第一种：float

<!--html-->
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="middle"><span>middle</span></div>

//css
#left{
    float: left;
    background-color: red;
    width: 150px;
    height: 50px;
}
#right {
    float: right;
    background-color: yellow;
    width: 200px;
    height: 50px;
}
#middle {
    margin: 0 200px 0 150px;
    width: 100%;
    background-color: #fff9ca;
    height: 50px;
}

第二种：BFC

<!--html-->
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="middle"><span>middle</span></div>

//css
#left {
    background-color: red;
    width: 150px;
    height: 50px;
    float: left;
}
#right {
    background-color: yellow;
    width: 200px;
    height: 50px;
    float: right;
}
#middle {
    background-color: #fff9ca;
    height: 50px;
    overflow: hidden;
}

第三种：双飞翼布局

<!--html-->
<div class="grid">
    <div id="middle">
        <div id="middle-span"><span>middle</span></div>
    </div>
    <div id="left"><span>left</span></div>
    <div id="right"><span>right</span></div>
</div>

//css
#middle {
    float: left;
    background-color: #fff9ca;
    width: 100%;
    height: 50px;
}

#middle-span {
    margin: 0 200px 0 150px;
}

#left {
    float: left;
    position: relative;
    background-color: red;
    width: 150px;
    margin-left: -100%;
    height: 50px;

}

#right {
    float: left;
    position: relative;
    background-color: yellow;
    width: 200px;
    margin-left: -200px;
    height: 50px;
}

第四种：flex

<!--html-->
<div class="flex">
    <div id="left"><span>left</span></div>
    <div id="middle"><span>middle</span></div>
    <div id="right"><span>right</span></div>
</div>

//css
        .flex {
            display: flex;
            flex-flow: row;
        }

        #left {
            background-color: red;
            width: 150px;
            height: 50px;
        }

        #middle {
            background-color: #fff9ca;
            flex: 1; /* flex中宽度自适应使用该属性，使用100%时其他列的固定宽度会出现问题*/
            height: 50px;
        }

        #right {
            background-color: yellow;
            width: 200px;
            height: 50px;
        }