[css]布局 三栏式布局，左右定宽，中间内容区域自适应

        实现三栏布局的经典方式有：圣杯布局，双飞翼布局，两者都是利用父元素的margin/padding来达到想要的效果，同时也是遵循重要内容优先加载的规则(先加载中间部分)。只是在实现上有些不同，同时利用css3的flex布局也可以实现以上效果。

圣杯布局：用一个父元素，包裹三个子元素，同时将中间部分写在前边

    
    
    


    

        
111111111111111
        
222222222
        
333333333333
    

双飞翼布局：双飞翼布局不用一个div包裹所有子元素，只需要包裹中间自定义区域，还是要将元素进行float的定位，然后利用center元素的margin+Left等的负margin实现效果，因为没有使用padding使得Left、right元素不需要进行定位，双飞翼布局实现上比圣杯布局简单。

flex布局：flex弹性布局中要是利用了其自身的一些属性，相比其他的方式而言，flex的方式会更加简洁，利用order调整元素的放置位置，Left、right的宽度固定，不用设置flex的值，只有center的值是随机变化的所以需要设置flex：1 1 width，其相当于三个属性的组合属性：flex-grow、、flex-basis。

flex-grow：

number

一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

flex-shrink：flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-basis：

number

一个长度单位或者一个百分比，规定灵活项目的初始长度。

    
    
    


 

     

         
middle
         
HHHHHHHHHHHHHHHHHHHHHH
             hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
             HHHHHHHHHHHHHHHHHHHHHH
             hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
         
     
     

         
left
         
oooooooooooooo
             0000000000000000
             00000000000000000
             ooooooooooooooo
             ooooooooooooooo
             000000000000000
     
     

         
right
         
BBBBBBBBBBBBBB
             888888888888888888
             BBBBBBBBBBBBBBBBBB
             88888888888888888888