使用弹性盒子兼容低端适配有时需要:
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;