Flex 那些坑

来源:互联网 发布:学意大利语的软件 编辑:程序博客网 时间:2024/06/16 03:17

最早看到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是不能用了呢

0 0
原创粉丝点击