代码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，但不用相对定位了。
