純css寫三聯列

最近翻看了之前的一些面經，發現之前的一些問題並沒有得到根本的解決，趕緊補習一下；

這裏我介紹兩種方法：

1. 最推薦的一種，也是自己用的比較多的一種方法  flex佈局法：首先在總的父級元素上設置一個display: flex;屬性。然後給定左右兩個元素的寬高，中間元素設置flex:1;這樣就可以完美實現自適應三聯列（裏面的三個div分別是左 中 右）

    <!-- 1.利用flex 父級元素設置display: flex;  中間元素設置flex:1; -->
    <div class="allblock" style="display: flex; width: 100%;height: auto; ">
        <div style="width: 200px;height: 500px;background-color: red;">1</div>
        <div style="flex: 1;background-color: yellow;">2</div>
        <div style="width: 200px;height: 500px;background-color:red ;">3</div>
    </div>

這種方法的缺點除了對於古老的瀏覽器有一些兼容性的問題以外，沒有任何缺點  代碼簡單，清晰明瞭好理解

2. 給大家介紹一種之前的佈局方法：雙飛翼佈局 

首先 設置第一個div爲中間區域  width:100%；其餘兩個塊和之前類似  爲什麼要定義第一個塊爲中間，因爲我們要把相對需要更改位置的塊放在下面，從而不需要操作中間區域

應該是這樣子，試想一下，我們如何能讓紅和藍塊和他們跑到一行上呢？

我們利用了margin屬性，要讓黃塊到最前面，需要margin-left：-100%；藍塊相對應會到現在黃塊上，只需要margin-left：-200px（就是自己的寬就可以）

看起來還不錯，但是你會發現，上面的數字1消失不見了，其實是紅色塊是整個行都覆蓋了，數字1被黃塊擋住了，所以就需要多一步操作，在紅塊的裏面，加一個子集，給他設置margin: 0 200px;來抵消空間，這樣就完成了雙飛翼佈局

    //正式寫代碼的時候還是建議大家可以用外聯css的方式去寫樣式，這裏給大家這樣寫僅僅是爲了直觀好理解
    <div class="allblock" style="width: 100%;height: auto; ">
        <div style="width: 100%;height: 300px; background-color: red; float: left;">
            <div style="margin: 0 200px;">1</div>
        </div>
        <div style=" width:200px;height: 300px;float: left;margin-left: -100%; background-color: yellow;">2</div>
        <div style="width: 200px;height: 300px; margin-left: -200px; background-color:rgb(0, 225, 255);float: left;">3</div>
    </div>