flex 弹性盒子的认识

1. 一、弹性盒子父元素的兼容写法：

1.   display:-webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

1. 二、横向排列布局（justify-content）

1. 1.  -webkit-justify-content:center;
       justify-content:center;
       -moz-box-pack:center;
       -webkit--moz-box-pack:center;
        box-pack:center;

1. 三、竖项排列布局（align-items）
2. align-items:center;
   -webkit-align-items:center;
   box-align:center;
   -moz-box-align:center;
   -webkit-box-align:center;
   
3. 四、伸缩盒子布局兼容 （flex）

4. 1. -webkit-box-flex: 1;
   2. -webkit-flex: auto;
   3. -ms-flex: auto;
   4. flex: auto;
   5. （flex:auto的展开）
   6. flex-grow: 1;
   7. flex-shrink: 1;
   8. flex-basis: auto;

1. 五、flex-direction

1. -webkit-box-orient:vertical;
       -webkit-box-direction:normal;
       -moz-box-orient:vertical;
       -moz-box-direction:normal;
       flex-direction:column;
       -webkit-flex-direction:column;

1. 六、flex-wrap 
3. -webkit-flex-wrap:wrap;
       -webkit-box-lines:multiple;
       -moz-flex-wrap:wrap;
       flex-wrap:wrap;
   

4. 3.4 justify-content属性

   justify-content属性定义了项目在主轴上的对齐方式。

   
   .box {
     justify-content: flex-start | flex-end | center | space-between | space-around;
   }

   
   

5. 3.5 align-items属性

   align-items属性定义项目在交叉轴上如何对齐。

   
   .box {
     align-items: flex-start | flex-end | center | baseline | stretch;
   }

   
   
6. 来自文章
7. 兼容性文章