實現一個三列布局的左右寬度固定，中間自適應。可以使用傳統的css布局，也可以使用css3的新特性flex布局實現。
1.使用自身浮動法：
自身浮動法的原理就是對左右分別使用float:left和float:right，float使左右兩個元素脫離文檔流，中間元素正常在正常文檔流中。對中間文檔流使用margin指定左右外邊距進行定位。
該布局法的不足是三個元素的順序，middle一定要放在最后，middle占據文檔流位置，所以一定要放在最后，左右兩個元素位置沒有關系。當瀏覽器窗口很小的時候，右邊元素會被擠到下一行。
2.使用絕對定位法：
絕對定位法原理是將左右兩邊使用absolute定位，因為絕對定位使其脫離文檔流，后面的middle會自然流動到他們上面，然后使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應屏幕寬度。
該法布局的好處，三個div順序可以任意改變。但是因為是絕對定位，如果頁面上還有其他內容，top的值需要小心處理。
3.使用flex布局：
設置一個父div，添加樣式display：flex。中間div設置flex-grow：1，（等同代碼中設置flex：1。flex是grow、shrink、basis的簡寫）但是盒模型默認緊緊挨着，可以使用margin控制外邊距。middle一定在中間，否則需要order屬性來調整。
通過項目屬性flex-grow設置middle的放大比例，將空余的空間用middle來填充，使三個項目排滿一整行；默認為0，也就是對剩余空間不做處理。通過項目屬性flex-basis 設置left和right的固定寬度。
4.補充一個聖杯布局，實現上述要求：
聖杯布局的原理是margin負值法。首先設置父div的位置，使其左右分別空出200px和120px區域。然后利用三列全部左浮動和相對定位以及設置left和right 負的外邊距可以實現。代碼如下，效果同上。
5.補充一個雙飛翼布局，有點類似於聖杯布局：
