需求：

两边栏固定宽度，中间宽度自适应，一般左边栏为导航，右边栏为广告，中间栏为主要内容的展示，div块上中间栏放在第一位，重要的东西放在文档流前面可以优先渲染。

圣杯布局和双飞翼布局的共同特点都是利用float+margin的负值来实现并列的结构。首先中间栏width 100%后，左右栏被挤在第二行，左栏margin-left设置为-100%后（实际即为中间栏的宽度），这样左栏就跟中间栏并列，且左栏和中间栏的左边缘对其，同理右栏margin-left(因为float是向左的)设置为右栏自己宽度的负值，这样就升上去，且右边缘和中间栏的右边栏重合。

现在的问题就是左右栏占用了main的空间。圣杯布局和双飞翼的布局的处理差异也就在这里：

1.圣杯布局

圣杯布局的处理方式为父容器container设置padding-left和padding-right为左右栏的宽度，此时左右栏会表现往里面缩一些，因为padding只是调节内部元素的位置并不会显示width的content（盒子模型），对外部元素没影响。此时就需要用相对定位调节左右栏left和right为父容器pading左右值的负值，这样就移开了左右栏对中间栏的占据，且中间栏的内容全部显示在width的content中。

代码：

        
    
    
     
      Main
     
    
     
      Left
     
    
     
      Right
     
  
    

2. 双飞翼布局

双飞翼并列的方式与圣杯布局相同，但是摈弃了相对定位的方式。而是给中间栏加了一个父容器，父容器设置float，子容器设置margin-left和margin-right抵消左右栏布局的宽度，避免content显示部分被左右栏覆盖到自己宽度。（注意不是float左右因为margin移动了，而是是中间栏的content的内容width一部分宽度分给了margin，自己缩小了，float是脱离的文档流的，无视block，但是受影响到文字，参考文字环绕）。

代码：

先进而简单的flex布局

1.order指定顺序，默认为0，越小越靠前

2.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

3.flex-basic:属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。