首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
广告
varius
V2EX  ›  问与答

从 Flutter 转前端，请教 React 写布局的方式

  •   
  •   varius · 2020-02-06 22:07:27 +08:00 · 1815 次点击
    这是一个创建于 1786 天前的主题，其中的信息可能已经有所发展或是发生改变。

    RT。小弟最近从 Flutter 转前端，学习了 React+Material-UI，但是对布局及尺寸还不是特别熟悉。 向各位大佬请教，如果要实现一个类 Column 的布局，从上到下分四个部分，并且每个部分高度的占的百分比不一样，目前知道只知道可以每个 Div 写 height:*vh，但是感觉这个方案还是非常原始呀？ 如何实现比较通用呢？

  • flutter
  • React
  • 请教
  • 布局
    13 条回复  •  2020-02-07 20:57:41 +08:00
    manami
        1
    manami  
       2020-02-06 22:16:33 +08:00 via Android
    你说的是 CSS 的问题，与 React 无关……
    murmur
        2
    murmur  
       2020-02-06 22:23:25 +08:00
    学一下 flex、媒体查询，别乱用 vh/vw/rem 这些，否则小米网站的手机版横屏就是最好的例子
    crysislinux
        3
    crysislinux  
       2020-02-06 22:31:27 +08:00 via Android
    楼上说得对，尤其是 vh，我认为简直是毒瘤
    CaHCO3
        4
    CaHCO3  
       2020-02-07 03:47:28 +08:00 via iPhone
    @murmur 哈哈哈哈，高手！
    yilingersier
        5
    yilingersier  
       2020-02-07 04:33:50 +08:00
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    del1214
        6
    del1214  
       2020-02-07 09:23:39 +08:00
    逆行经脉，当心走火入魔
    varius
        7
    varius  
    OP
       2020-02-07 14:58:42 +08:00
    @murmur 谢谢大佬！请问需不需要用 Material-UI 的 Grid，Container 这些，还是直接用 CSS 写 Flex 布局
    varius
        8
    varius  
    OP
       2020-02-07 14:59:04 +08:00
    @yilingersier 非常感谢！请问需不需要用 Material-UI 的 Grid，Container 这些呢
    varius
        9
    varius  
    OP
       2020-02-07 14:59:17 +08:00
    @del1214 哈哈哈，生活所迫呀
    murmur
        10
    murmur  
       2020-02-07 15:08:01 +08:00
    @varius flex 布局是 css 基础的一部分，现在不掌握面试也跑不掉
    varius
        11
    varius  
    OP
       2020-02-07 17:08:05 +08:00
    @murmur 感谢回复！ flex 的确要认真学一下，那一般开发应用是直接写 CSS，还是用那些包装了的呢
    murmur
        12
    murmur  
       2020-02-07 17:20:43 +08:00
    @varius css 要会写，而且很重要，不写 css 要么俗要么丑，内部用一下还可以，拿给公众是真的拿不出手
    varius
        13
    varius  
    OP
       2020-02-07 20:57:41 +08:00
    @murmur 谢谢大佬
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2794 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 02:18 · PVG 10:18 · LAX 18:18 · JFK 21:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.