华为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!