eyeix

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

  •  
  •   eyeix · Aug 10, 2024 · 2738 views
    This topic created in 652 days ago, the information mentioned may be changed or developed.

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

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

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

    大家有这样的感觉吗?

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

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

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

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

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

    flex 让我耗费时间就是要处理 子元素的大小 的占用比例问题。因为要做 PC 和移动端自适应,所以耗时比较久。
    eyeix
        8
    eyeix  
    OP
       Aug 10, 2024
    @WhateverYouLike 确实,感觉是自己还不太熟悉 grid 布局的方式。
    eyeix
        9
    eyeix  
    OP
       Aug 10, 2024
    @qcbf111 就是说还是要根据子元素内容的大小来决定实际的宽高比较好吗?这样听起来 flex 比较优先。
    NotAfraidLP
        10
    NotAfraidLP  
       Aug 10, 2024
    我觉得是因为 flex 更简单...
    不过 tailwind grid 封装得很易用了 比自己写原生 css gird 好上手多了
    sugarsalt
        11
    sugarsalt  
       Aug 11, 2024
    @Felldeadbird 个人感觉 grid 处理子元素比例比 flex 方便得多,有种 word 里用透明边框的表格来排版的美
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   886 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 66ms · UTC 22:22 · PVG 06:22 · LAX 15:22 · JFK 18:22
    ♥ Do have faith in what you're doing.