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;
上一篇:[译]Java垃圾回收是如何工作的


下一篇:THML结构语义化之table/form