华为mate8对flex的支持

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

先上结论

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

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

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

兼容写法

html:

<div class="flex-box">
    <button type="button">保存button>
    <button type="button">取消button>
div>

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 使用教程

http://xuyuan923.github.io/2015/01/03/mobile-debug/
https://github.com/nupthale/weinre

Goog Luck!