【问题标题】:Grid OR Flexboox? if using react-semantic-ui网格还是 Flexboox?如果使用 react-semantic-ui
【发布时间】:2019-04-14 05:55:23
【问题描述】:

目前我正在奠定我网页的基础(这也是移动优先),我有一个论点。我在我的 react 项目中添加了 react-semantic-ui。

添加了我的目标布局。现在我应该用什么来绘制这个,GridFlexbox? 我应该避免使用Grid吗?它会减慢渲染速度还是降低性能?还是我应该在最多的地方使用flexbox?还是应该始终使用Gridflexbox?或者它可能是两者的结合。 请指导我。

提前致谢!

【问题讨论】:

    标签: reactjs layout flexbox semantic-ui-react


    【解决方案1】:

    CSS-grid 非常适合构建宽布局。它甚至可以帮助创建不对称项目。

    Flexbox 非常适合对齐元素内的内容。使用 flex 放置项目的小细节。

    将 CSS 网格用于 2D 布局(行和列)

    Flexbox 只在一个维度(行或列)上效果更好

    没有理由只使用其中之一。研究它们并一起使用。

    【讨论】:

    • 嘿@victor,谢谢你的回答,但我没有问CSS-grid,但我的问题围绕semantic-ui-grid,它与具体案例above created layout有关。那么在该图像中,您更喜欢用什么来布置基本框架?你愿意把 flexbox 拉进去吗?我认为semantic grid 就足够了。我可以使用flex 创建完整的布局,但是通过考虑其他扫描仪(如性能、一致性和未来的变化适应性)来了解究竟应该采用什么方法会很棒。
    • 是的,我明白了)我的答案是一样的。使用 semantic-ui-grid 制作网格或使用任何其他类似 bootstrap 来制作布局和 flex 以管理内部组件。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-11-10
    • 1970-01-01
    • 2017-04-09
    • 2017-09-01
    相关资源
    最近更新 更多