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;