V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
love
V2EX  ›  CSS

你们用 flex 布局吗?有没有碰到坑的?

  •  
  •   love · 2016-01-05 09:39:02 +08:00 · 5333 次点击
    这是一个创建于 3276 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我正在撸的项目用了 flex ,因为 flex 有旧版和新版,还好二者同用不冲突。
    不过貌似碰到了些问题。

    比如旧版 flex 的容器不能 position: absolute ,否则 flex 失效,在弹出层里用 flex 还要外包容器很麻烦,你们碰到这问题了吗?
    11 条回复    2016-01-05 16:42:27 +08:00
    rayps
        1
    rayps  
       2016-01-05 10:01:32 +08:00
    听说 Flex 在 Android 微信完全没法用?
    love
        2
    love  
    OP
       2016-01-05 10:03:47 +08:00
    @rayps 好象是吧,我不考虑微信。
    love
        3
    love  
    OP
       2016-01-05 10:07:43 +08:00
    找到原因了,原来 firefox 的旧 flex 实现不是按那个旧标准来的, box 元素会收缩而不是标准上的类 block 布局,而 webkit 则不会。 https://bugzilla.mozilla.org/show_bug.cgi?id=625694
    解决办法是必需显式指定 width 和 height 。
    chemzqm
        4
    chemzqm  
       2016-01-05 10:15:47 +08:00
    flex 在 IE 上坑更多 http://caniuse.com/#flex
    Aaaaaashu
        5
    Aaaaaashu  
       2016-01-05 10:26:53 +08:00
    不考虑微信和向后兼容,体验非常棒。
    des
        6
    des  
       2016-01-05 10:37:35 +08:00
    你确定不要兼容 IE. lol
    Kilerd
        7
    Kilerd  
       2016-01-05 10:52:05 +08:00
    t/236411 参考一下我发的贴
    yunkou
        8
    yunkou  
       2016-01-05 13:57:42 +08:00
    @rayps 可以兼容的 -webkit-box
    miniers
        9
    miniers  
       2016-01-05 16:30:32 +08:00
    移动端体验一级棒,省了好多 js
    桌面端想到 ie8 就呵呵呵呵了
    love
        10
    love  
    OP
       2016-01-05 16:40:46 +08:00
    @chemzqm 这不是问题,只需一个没坑的子集就完爆原先的方法了。只是不支持 IE8 ,不过 IE8 不是我的目标用户。
    Troevil
        11
    Troevil  
       2016-01-05 16:42:27 +08:00
    体验很好 短短代码就能写出自适应布局 ,但是 兼容目前还是有待提高的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1244 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 17:53 · PVG 01:53 · LAX 09:53 · JFK 12:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.