最近做移动端页面，发现华为mate8真是傲娇（生气，对 flex 各种不支持。不知道华为别的机型有没有这个问题，以下以mate8为例。

先上结论

今天用 调试了一下，发现几点：

• 华为mate8只支持 -webkit-box
• -webkit-box 盒子里的元素必须是块级元素（inline-block也是不行的）
• 子元素不支持 flex 属性，但是支持 box 相关的 -webkit-box-flex 属性

得知这些之后，又愉快地（不存在的）去改样式了~

兼容写法

html:

    
    
     保存    
     取消
    
复制代码

css:

.flex-box {    display: -webkit-box; /* mate8 支持 */    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;}.flex-box button {    display: block;    -webkit-box-flex: 1; /* mate8 支持 */    -moz-box-flex: 1;    -webkit-flex: 1;    -ms-flex: 1;    flex: 1;}复制代码

weinre 使用教程

Goog Luck!