flex布局之前世今生

  flexbox，一种CSS3的布局方式，也叫做弹性盒子模型，2009年w3c提出用来为盒装模型提供最大的灵活性。

 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

    比如：在知道对象宽高的情况下，实现div盒子水平垂直居中。对居中元素绝对百分比定位，然后通过margin偏移的方式来实现。

 .container{

        width: 600px;

        height: 400px;

        border: 1px solid #000;

        position: relative;

    }

    .box{

        width: 200px;

        height: 100px;

        border: 1px solid #000;

        position: absolute;

        left: 50%;

        top: 50%;

        margin-left: -100px;

        margin-top:-50px;

    }

假如使用了flex后，实现起来就简单了，而且不需要自己去算，也不需要绝对定位，只需要通过对伸缩容器定义两个属性，justify-content定义伸缩项目沿着主轴线的对齐方式为center， align-items定义伸缩项目在侧轴（垂直于主轴）的对齐方式为center，具体如下：

.container{

    width: 600px;

    height: 400px;

    border: 1px solid #000;

    display: flex;

    justify-content:center;

    align-items:center;

}

.box{

    width: 200px;  //宽度可以为任意

    height: 100px; //高度可以为任意

    border: 1px solid #000;

}

/*----------------------------------那么，接下来开始介绍Flexbox。---------------------------------*/

简单放一张图  

介绍一下：

flexbox由flex容器 + flex项目组成 （容器即父元素，项目即子元素）。

   注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

有两条轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器六个属性：flex-direction

                         flex-wrap

                         flex-flow

                         justify-content

                         align-items

                         align-content

具体属性的值见上图

优点：简单、方便、快速。 

缺点：兼容性

    具体大家可以见这个网站：caniuse（http://caniuse.com/#search=flexbox）

     /*--------------------------------------------------------结束。-------------------------------------------*/