论flex布局和box布局的华为meta8手机自带浏览器的兼容

现在的手机有很多的需要垂直居中和水平居中，还要和能够很完美的配合适屏的需求，css3中出现了完美的盒模型box-flex和flex弹性布局，网上能找到各种关于这两种布局的资料，用法也不难；

flex布局： display：flex

父节点：

.box {
  display: flex;
  justify-content: center;  
  align-items: center; // 垂直居中
}

子节点

.item{
    flex 1
}

用法链接的资料：flex布局骰子布局 ； Flex 布局教程：语法篇

box布局：display：box

父节点：

.box{
    display: box;
    box-align: center; //规定如何对齐框的子元素 
    box-pack: center; // 规定水平框中的水平位置或者垂直框中的垂直位置
}

子节点：

.item{
    box-flex:1;
}

用法链接的资料：弹性盒子模型简介

兼容问题

现在大多数的手机都是能够兼容flex布局的，而且我们主要用的也是flex更多一些，所以对于box布局并没有太多的使用与研究，但是最近在使用flex布局的时候却发现华为meta8自带的浏览器（版本比较低的啦）却对这个flex布局不支持，却对下面的这个属性支持，这样又可以使用啦啦啦啦。。。。。

.box{
    display: -webkit-box;
}

哈哈，更让人跌破眼镜的是，在兼容华为meta8自带浏览器的时候，因项目中使用的是stylus预处理器，在进行编译的时候却不能编译

.item{
    -webkit-box-flex:1;
}

最后的最后加了一个padding的属性才可以编译，虽然不知道为啥，但是编译成功了,而且值得注意的是：这个padding的属性必须放紧挨着才可以编译，虽然觉得有点不可思议。。。。。

.item{
    -webkit-box-flex:1;
    padding 0
}