最近微信H5改版总算是见识了Flex布局的好处与坑，好处是再也不用去计算list的宽度了，即使是去掉一个li也能自适应。坑就是安卓端出现的不兼容搞得蛋蛋疼，临到要上线还在改这个bug。（如图iphone5s和华为荣耀7增减按钮变形了）
开始写这个地方的页面的时候，满心欢喜的各种display:flex;flex:1;然后开心得用自己手中iphone5s（系统9.0+）测试，一切正常。然而测试那边用了各种安卓机器，测出了上图中的问题。最后绞尽脑汁度娘到大漠老师写的文章《使用Flexbox：新旧语法混用实现最佳浏览器兼容》 算是发现新大陆了。然后这个兼容性问题就迎刃而解了^.^
修复后的页面代码如下：
<div class="rcfs rcfsBtn">
<input type="button" value="-" />
<input id="result" maxlength="8" type="text" value="1" />
<input type="button" value="+" />
</div>
修复后的css代码如下：
.item2 .rcfsBtn input[type='button'] {
-webkit-box-flex: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 2; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex:2; /* Chrome */
-ms-flex:2; /* IE 10 */
flex:2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: center;
align-items: center;
line-height: 38px;
padding: 0;
font-size: 16px;
font-weight: bolder;
}
.item2 .rcfsBtn input[type='button']:first-child{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order:1;
}
.item2 .rcfsBtn input[type='button']:last-child{
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order:3 ;
}
语法中，只需要把有兼容问题的地方设置好宽度，然后余下的宽度会自动填充空间。如果不给他们显式的设置宽度，在有些安卓机型中会直接崩溃。
