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;

巴特西

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

最新文章

热门文章