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

[varius]

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

[manami]

你说的是 CSS 的问题，与 React 无关……

[murmur]

学一下 flex、媒体查询，别乱用 vh/vw/rem 这些，否则小米网站的手机版横屏就是最好的例子

[crysislinux]

楼上说得对，尤其是 vh，我认为简直是毒瘤

[CaHCO3]

@murmur 哈哈哈哈，高手！

[yilingersier]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[del1214]

逆行经脉，当心走火入魔

[varius]

@murmur 谢谢大佬！请问需不需要用 Material-UI 的 Grid，Container 这些，还是直接用 CSS 写 Flex 布局

[varius]

@yilingersier 非常感谢！请问需不需要用 Material-UI 的 Grid，Container 这些呢

[varius]

@del1214 哈哈哈，生活所迫呀

[murmur]

@varius flex 布局是 css 基础的一部分，现在不掌握面试也跑不掉

[varius]

@murmur 感谢回复！ flex 的确要认真学一下，那一般开发应用是直接写 CSS，还是用那些包装了的呢

[murmur]

@varius css 要会写，而且很重要，不写 css 要么俗要么丑，内部用一下还可以，拿给公众是真的拿不出手

[varius]

@murmur 谢谢大佬