css 弹性盒子--“垂直居中”--兼容写法

使用弹性盒子兼容低端适配有时需要：

display:flex 和 display:-webkit-box

 

      display: -webkit-box;
      -webkit-box-align: center;
      -webkit-box-pack: center;

      display: flex;
      align-items: center;
      justify-content: center;

对应属性：

弹性盒子：

   display: -webkit-box;
   display: flex;

上下垂直

    -webkit-box-align: center;
      align-items: center;

左右居中

    -webkit-box-pack: center;
     justify-content: center;

占父级元素宽度的n份

 -moz-box-flex:3;
 -webkit-box-flex:3;
 -webkit-flex:3;
 flex:3;

父元素设置子元素 倒序

 display: -webkit-box;
 display: flex;

 -webkit-box-direction:reverse;
 box-direction:reverse;
 flex-direction: row-reverse

父元素设置子元素 列排序

 display: -webkit-box;
 display: flex;

 flex-direction: column;   /*列*/

 box-orient: vertical;
 -webkit-box-orient: vertical; 

父元素设置子元素 行排序

   display: -webkit-box;
   display: flex;

   flex-direction: row;   /*行*/

   box-orient: horizontal;
   -webkit-box-orient: horizontal;