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

Solved by Flexbox

  •  1
     
  •   Livid · 2017-05-29 16:35:01 +08:00 · 4976 次点击
    这是一个创建于 2735 天前的主题,其中的信息可能已经有所发展或是发生改变。
    用 Flexbox 实现一些复杂布局的例子:

    https://philipwalton.github.io/solved-by-flexbox/

    中文版: https://hufan-akari.github.io/solved-by-flexbox/

    目前 Flexbox 已经在所有主要浏览的当前版本中得到支持:

    http://caniuse.com/#feat=flexbox

    比如经典的 3 栏布局用 Flexbox 的实现:

    https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
    9 条回复    2017-05-30 17:10:58 +08:00
    k9982874
        1
    k9982874  
       2017-05-29 16:43:44 +08:00 via iPad
    垂直居中这个痛点解决了,cheers ~
    ersic
        2
    ersic  
       2017-05-29 16:53:43 +08:00 via Android
    最近搞微信小程序,也在看 Flexbox 布局
    POPOEVER
        3
    POPOEVER  
       2017-05-29 17:24:31 +08:00
    一直用 flex 来做垂直居中,也有一些基于 flexbox 的框架,比如 http://bulma.io/

    最近在看 CSS Grid,蛮好玩的,大家可以去找 CSS Grid 规范的主要贡献者 Jen Simmons 和 Rachel Andrew 的教学视频
    Tunar
        4
    Tunar  
       2017-05-29 17:25:50 +08:00 via Android
    flex 垂直居中爽飞了
    Myflos
        5
    Myflos  
       2017-05-29 18:51:09 +08:00
    POPOEVER
        6
    POPOEVER  
       2017-05-29 19:27:20 +08:00
    Flex 其实最实用的是在表单的自适应实现上
    Mutoo
        7
    Mutoo  
       2017-05-29 21:11:53 +08:00
    flex 在 responsive design 上的实现也是非常方便,flex-direction 直接可以切换 row/column 布局。
    seki
        8
    seki  
       2017-05-29 22:22:24 +08:00
    ljcarsenal
        9
    ljcarsenal  
       2017-05-30 17:10:58 +08:00
    这个不错
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2887 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 08:48 · PVG 16:48 · LAX 00:48 · JFK 03:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.