左右定寬，中間自適應，實現三列佈局

左右定寬，中間自適應，實現三列佈局

今天想說的是一個左右定寬，中間自適應，實現三列佈局，我也總結了以下，主要有以下幾種：
廢話不多說，直接上代碼：

第一種：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;
        }