网格还是 Flexboox？如果使用 react-semantic-ui

Posted 2023-03-07

【中文标题】网格还是 Flexboox？如果使用 react-semantic-ui

【英文标题】：Grid OR Flexboox? if using react-semantic-ui

【发布时间】：2019-04-14 05:55:23

【问题描述】：

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

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

提前致谢！

【参考方案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 以管理内部组件。