代碼1
代碼2
代碼3
代碼4-float版
代碼4-float簡化版
代碼4-flex版
代碼5
圣杯布局
雙飛翼布局
以上圣杯／雙飛翼布局改為flex版
其中：
- 圣杯布局：
三列布局，兩遍寬度固定，中間自適應，中間內容元素再dom元素次序中優先位置。
缺點：中間欄最小寬度不能小于左側邊欄的寬度，不然會出現錯亂。原因是左側邊欄要浮動上去，margin-left是-100%，如果中間欄寬度比左側邊欄小，那么就浮動不上去，因為對于側邊欄來說，中間欄的寬度空間是不夠的。 - 雙飛翼布局：
比圣杯布局多用了1個div，少用4個css屬性，分別是：- 圣杯布局容器的 padding-left和padding-right
- 左右兩個div的position: relative及對應的right、left
雙飛翼布局子div里用margin-left和margin-right共2個屬性，比圣杯布局思路更直接和簡潔一點。簡單說起來就是雙飛翼布局比圣杯布局多創建了一個div，但不用相對定位了。
