Flex 那些坑

最早看到flex的布局是在http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这个博客里面。

后来交互也出了一些东西，看起来只有flex才能实现。交互图是这样的

----------------------------item{width：100%}------------------------------

-                                                                                                       -

-weight==1QQQQQQQQQQQQQQQQQQQQQ...       rightText  -

------------------------------------------------------------------------------------

其中rightText如果是空，那么“weight == 1”部分将占据整个空间，在android上很好解决，就是把“weight == 1”设置一下比重，然后固定住rightText的宽度。但是html上，似乎没有很好的办法可以解决这个问题，然后问了一下旁边“专业组”的web开发，他和我说了flex。我也用了，在我的手机上跑也没有问题。

后来兼容性测试的时候，才发现问题比我想的要严重。

1、在某android4.0.3的机器上，flex的布局被实现成block;然后换行成两行-_-

2、在某IOS 7 上，被flex的布局被实现成inline-block的形式。“rightText”直接跟随在“weight == 1”的右边；最糟糕的是，当“weight == 1”很长的时候，“rightText”被挤成一排。测试直接提成两个BUG。可恶！

后来我换了一下布局，限定了“weight == 1”的宽度百分比，解决了这个问题。

但是flex是不能用了呢