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

当下你会选择 flex 还是 grid 作为首选?

  •  
  •   lrvinye ·
    riccox · 133 天前 · 1809 次点击
    这是一个创建于 133 天前的主题,其中的信息可能已经有所发展或是发生改变。

    日常开发中使用 TailwindCSS 的情况下,总是会优先选择使用 flex 布局,可能是因为写起来语义比较直观?

    最近看了很多关于 grid 布局方式的推荐,感觉 grid 还是很强大,

    但是实际写起来总是不能很好的把想要实现的布局用 grid 相关属性串起来,

    大家有这样的感觉吗?

    11 条回复    2024-08-11 06:48:44 +08:00
    estk
        1
    estk  
       133 天前 via iPhone
    flex 一维,grid 二维,看使用场景。自适应网页经常要用到 grid
    nagisaushio
        2
    nagisaushio  
       133 天前   ❤️ 1
    flex 是子元素的大小决定整体布局
    grid 是整体布局决定子元素的大小

    二者还是不太一样的
    qcbf111
        3
    qcbf111  
       133 天前
    任何前端/客户端, width/height 写的越多的布局越差.
    WhateverYouLike
        4
    WhateverYouLike  
       133 天前 via iPhone   ❤️ 3
    再等 3 ~ 5 年,希望所有人在整体排版上完全使用 grid ,在组件中使用 subgrid ,在行中使用 flex 。

    使用 grid 最好的状况是设计师也有基于网格布局的响应式设计能力,设计和技术共用同一套设计语言的优点巨大。

    针对不会用的问题,作为技术,你可以先尝试完全用 grid 实现几套杂志、新闻类的网站(比如卫报)来练手。推荐 udemy 上的这个课程《 Advanced CSS and Sass: Flexbox, Grid, Animations and More!》的第二大节 grid ,不知道这么多年了课程内容变没变。
    Bingchunmoli
        5
    Bingchunmoli  
       133 天前 via Android
    @WhateverYouLike 是这样的,我不会 grid 所以习惯 flex , 现在写前端就更少了,毕竟也就最开始找工作的时候。前后端全干
    wu67
        6
    wu67  
       133 天前
    flex 简单粗暴. 尤其是需要稍微兼容一下老设备的场景.
    再过个 5 年到 10 年应该就随便了, 大部分搭载 win7 的机器应该都坏得差不多了.

    别的不说, 前阵子还有个在用 17 年买的安卓机的喷我, ‘你手机换得勤不代表别人换机也勤’.....
    Felldeadbird
        7
    Felldeadbird  
       133 天前
    我一直是 flex 。grid 去看了一下,还没怎么用。

    flex 让我耗费时间就是要处理 子元素的大小 的占用比例问题。因为要做 PC 和移动端自适应,所以耗时比较久。
    lrvinye
        8
    lrvinye  
    OP
       133 天前
    @WhateverYouLike 确实,感觉是自己还不太熟悉 grid 布局的方式。
    lrvinye
        9
    lrvinye  
    OP
       133 天前
    @qcbf111 就是说还是要根据子元素内容的大小来决定实际的宽高比较好吗?这样听起来 flex 比较优先。
    NotAfraidLP
        10
    NotAfraidLP  
       133 天前
    我觉得是因为 flex 更简单...
    不过 tailwind grid 封装得很易用了 比自己写原生 css gird 好上手多了
    sugarsalt
        11
    sugarsalt  
       133 天前
    @Felldeadbird 个人感觉 grid 处理子元素比例比 flex 方便得多,有种 word 里用透明边框的表格来排版的美
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2189 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 01:52 · PVG 09:52 · LAX 17:52 · JFK 20:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.