向左走，向右走：两种不同的圣杯布局实现

圣杯布局是一种比较经典的布局方案。目前各大商城首页都采取该布局方案。目前有两种实现方式比较流行，分别是传统的css+div的布局方案以及由css3的flex特性实现的更简洁的布局方案。两种方案各有优缺点，那么，让我们看看具体的实现吧。

传统的css+div实现方式

传统模式的基本原理为：利用容器元素的padding偏移和子元素的浮动和margin偏移特性实现圣杯布局。代码如下：

    
    
    
    



    
header
    

        
content
        
left
        
right
    
    
footer

关于圣杯布局有以下细节需要注意：center元素必须排在left和right之前。原因在于center元素为主内容区。由于通常的商城首页需要加载的内容都比较多，我们希望在网络较为极端的情况下，优先显示主内容区。

基于Flex弹性布局的圣杯布局

弹性布局由于其特性，在实现圣杯布局是非常简单，代码可读性更好。代码如下：

    
    
    
    



    
header
    

        
center
        
left
        
right
    
    
footer

以上的注释行是关键代码。需要注意的细节是，left元素的oder：-1属性实现元素排序往左移动一位，以达到元素在center渲染完之后渲染，却显示在center元素之前的效果。该效果在极端网络条件下就能体现出来。

两种方式的优缺点

可以看到，传统的圣杯布局采用的是css+div的布局方式，在实现细节上主要利于padding，margin，float等一些偏移属性。这些属性是非常常规的属性，在各浏览器的表现都非常一致，因此这种方式的兼容性非常好。在不同内核的浏览器之间，以及桌面和移动设备的表现上都非常一致。即使在IE6，IE5这样的古老浏览器上也能完美的呈现效果。缺点是代码可读性不太好，它采用了一些不太常规的偏移操作，容易让人产生困惑。
flex的实现方式可读性好，代码简单。但是，flex是css3.0的新特性。对于移动端来说，各大浏览器基本都支持css3.0，但是桌面环境就比较复杂。仍然有一些老项目运行在IE6上，这样就会造成兼容性问题。那么比较推荐的做法是：如果项目只针对移动端，就采用flex布局，如果桌面端和移动端都要兼顾，就采用传统布局。由于弹性布局是css的新特性，下面我们来看一下弹性布局给我们提供了哪些操作空间。

弹性布局

弹性布局依赖主轴和交叉。我们一般地可以将主轴和交叉轴比作x轴和y轴，但如果项目需要，我们也可以将主轴设置为纵轴，这样主轴就相当于y轴，而交叉轴就相当于x轴了。或许另一种比喻更为恰当，将主轴视为布局轴，交叉轴视为对齐轴。即主轴表示元素的排列方向，交叉轴表示元素的对齐方向。关于弹性布局，它包括容器属性和项目属性，一共12个属性。其中容器属性作用于容器中的所有项目，起到一个整体布局的作用，项目属性作用于容器中具体的子元素，起到一个细节调整的作用。掌握这些属性的用法，就掌握了弹性布局。
容器属性如下：

flex-direction  /*设置主轴方向，可以设置横向和纵向，默认为横向*/
flex-wrap       /*设置当主轴方向空间不足时，是否换行*/
flex-flow       /*flex-direction，flex-wrap的简写形式*/
justify-content/*设置主轴对齐方式，取值范围：flex-start | flex-end | center | space-between | space-around*/
align-items     /*交叉轴对齐方式，取值范围：flex-start | flex-end | center | baseline | stretch*/
align-content   /*主轴间的对齐方式，取值范围：lex-start | flex-end | center | baseline | stretch*/

项目属性如下：

order       //元素在容器中的排列顺序，越小越靠前，默认为0
flex-grow   //元素在容器中的放大比例，在没有剩余空间或设置为的情况下，不放大。默认值为0
flex-shrink //元素在容器中的缩小比例，当空间不足时，元素将等比缩小，默认为1，如果设置为0，则不缩小
flex-basis  //设置一个固定空间，浏览器根据固定空间可以计算出剩余空间，默认值为auto
flex        //flex-grow，flex-shrink，flex-basis的简写模式
align-self  //单独定义自身的对齐方式，覆盖容器的align-items属性

好了，就到这里吧，希望你有所收获。晚安。。。