V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wework
V2EX  ›  前端开发

大家平时在什么场景里用 flexbox 布局?

  •  
  •   wework · 2020 年 4 月 23 日 · 6095 次点击
    这是一个创建于 2100 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我平时用 flexbox,主要是以下两个场景

    1.垂直居中

    2.表单里面 多个输入框、图标等等都可以在同一行上规整地排列
    50 条回复    2020-08-15 18:46:21 +08:00
    himself65
        1
    himself65  
       2020 年 4 月 23 日 via iPad   ❤️ 23
    基本啥也用 flexbox……
    CodingNaux
        2
    CodingNaux  
       2020 年 4 月 23 日
    一行内的元素垂直居中
    CodingNaux
        3
    CodingNaux  
       2020 年 4 月 23 日
    实现 TabBar, flex-direction: column
    des
        4
    des  
       2020 年 4 月 23 日   ❤️ 2
    @himself65
    用在任何不需要兼容 ie 的地方
    Lombard
        5
    Lombard  
       2020 年 4 月 23 日
    自从用了 flex 布局,我已经好久没用过浮动了。
    guansixu
        6
    guansixu  
       2020 年 4 月 23 日
    对啊,能用就用
    crz
        7
    crz  
       2020 年 4 月 23 日
    还有 justify,这个用到的场景应该比较多
    noe132
        8
    noe132  
       2020 年 4 月 23 日
    所有场景都是 flex
    ynohoahc
        9
    ynohoahc  
       2020 年 4 月 23 日   ❤️ 1
    everywhere
    bgm004
        10
    bgm004  
       2020 年 4 月 23 日 via Android   ❤️ 1
    能用的时候都用。
    Loserzhu
        11
    Loserzhu  
       2020 年 4 月 23 日
    grid 布局用的多吗?
    之前面试还问我有没有用过,我说我用 vue 组件化开发只用过 flex 不用 grid 。。
    scukmh
        12
    scukmh  
       2020 年 4 月 23 日   ❤️ 1
    All.来自一个后端🐶
    lithbitren
        13
    lithbitren  
       2020 年 4 月 23 日   ❤️ 1
    基本全部 flex
    wework
        14
    wework  
    OP
       2020 年 4 月 23 日
    @Lombard float 好恶心啊,尤其是有些布局二次修改真麻烦
    wework
        15
    wework  
    OP
       2020 年 4 月 23 日
    @Loserzhu css grid 比 flex 来的晚,未来我觉得会比较受欢迎
    narmgalaxy
        16
    narmgalaxy  
       2020 年 4 月 23 日
    没什么地方不能用 flex,如果有地方不能用,那就再嵌套一层。----来自后端写的前端页面
    gaigechunfeng
        17
    gaigechunfeng  
       2020 年 4 月 23 日
    everywhere 吧。
    shijianit
        18
    shijianit  
       2020 年 4 月 23 日
    当确定不会运行在老的浏览器版本里面的时候,可以用这个,老浏览器兼容性有问题
    Elephant696
        19
    Elephant696  
       2020 年 4 月 23 日
    反正 float 是不用了,一维布局基本就是 flex,偶尔用 grid 。二维布局就是 grid
    azcvcza
        20
    azcvcza  
       2020 年 4 月 23 日
    flex 好啊,不然排版要搞死人,不搞栅格的话
    EminemW
        21
    EminemW  
       2020 年 4 月 23 日
    @narmgalaxy #16 我就是这么写的。。
    dartabe
        22
    dartabe  
       2020 年 4 月 23 日
    话说 grid 不也是 flex box 实现的吗?
    mostkia
        23
    mostkia  
       2020 年 4 月 23 日
    不用 flex 也能写好页面,那就不用它,兼容性能提高一些 IE 有时候还是要兼容的
    yuankui
        24
    yuankui  
       2020 年 4 月 23 日
    不用 flex 布局,我基本不会写了。。
    crist
        25
    crist  
       2020 年 4 月 23 日
    我™随手就用~~
    alertZ
        26
    alertZ  
       2020 年 4 月 23 日
    我从事前端最开始使用 box 布局,后面了解了 flexbox 后只在小程序中用过,到最后就彻底放弃这种布局方式,因为兼容性问题,无法兼容 IE10-版本。曾经在一个项目上使用这个布局,后期客户要求需要兼容 IE10-后,就再也不用了。
    cuzfinal
        27
    cuzfinal  
       2020 年 4 月 23 日
    想用 float 的时候就用 flex
    wework
        28
    wework  
    OP
       2020 年 4 月 23 日
    @alertZ 哈哈,我估计用 flex 最多的就是后端的同志了
    senher
        29
    senher  
       2020 年 4 月 23 日
    flex 一把梭
    angmieee
        30
    angmieee  
       2020 年 4 月 23 日
    想啥呢,只要是布局就用 flex,难道不香吗?
    bisheng949494
        31
    bisheng949494  
       2020 年 4 月 23 日
    在不需要考虑低版本 IE 的时候
    angmieee
        32
    angmieee  
       2020 年 4 月 23 日
    @wework 不是用的最多是后端的,前端也用啊,现在又不用兼容 IE
    ericgui
        33
    ericgui  
       2020 年 4 月 23 日
    基本上能用就用

    grid 用于多个卡片
    或者 sticky footer
    dinjufen
        34
    dinjufen  
       2020 年 4 月 23 日
    flex 真香
    rockyou12
        35
    rockyou12  
       2020 年 4 月 23 日
    我也是前端小白,感觉 flex 是万能的……
    gitjavascript
        36
    gitjavascript  
       2020 年 4 月 23 日
    几乎所有地方都用啊
    phpcxy
        37
    phpcxy  
       2020 年 4 月 23 日
    现在太幸福了,flex 一把梭~
    grewer
        38
    grewer  
       2020 年 4 月 23 日
    flex + position 情况基本全覆盖
    imswing
        39
    imswing  
       2020 年 4 月 23 日 via iPhone
    anywhere
    dabinDev
        40
    dabinDev  
       2020 年 4 月 23 日
    flex 是香然而在 iOS 小程序上一跑 ,全部改成 float 了 太坑了 害的我还去小程序社区发帖求助
    SilentDepth
        41
    SilentDepth  
       2020 年 4 月 23 日
    看了一眼我的代码,基本上 flex 无处不在😂
    zaul
        42
    zaul  
       2020 年 4 月 23 日
    一把梭
    lnim
        43
    lnim  
       2020 年 4 月 23 日
    糊 UI 的时候
    hoyixi
        44
    hoyixi  
       2020 年 4 月 23 日
    如果再配上 Grid,就该反问了:啥时候用 float ?
    autoxbc
        45
    autoxbc  
       2020 年 4 月 24 日
    实际稍微有点流量的网站用 flex 的很少

    出于个人浏览习惯,但凡是我常看的站我都会另写一套 User CSS,累积的样式表有几百个,扒代码时真没见过几个 flex 布局的,全站 flex 的一只手数的过来
    SilentDepth
        46
    SilentDepth  
       2020 年 4 月 24 日
    @autoxbc #45 历史沉淀下来的样式吧
    wanguorui123
        47
    wanguorui123  
       2020 年 4 月 24 日
    除了网页端,都几乎用 flex 和 grid
    zhyd1997
        48
    zhyd1997  
       2020 年 4 月 30 日 via Android
    https://www.ruanyifeng.com/blog/2015/07/flex-examples.html

    阮一峰老师的教程里都有总结
    94
        49
    94  
       2020 年 5 月 14 日
    如果没有接触过 flex,但是用 float 布局过,就可以考虑把 float 换成 flex,当然是在不考虑 IE 的场景下。
    bbzhang
        50
    bbzhang  
       2020 年 8 月 15 日
    好久都没写 float 了
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   1297 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 17:23 · PVG 01:23 · LAX 09:23 · JFK 12:23
    ♥ Do have faith in what you're doing.