ReactJS 定位组件

Question

对不起，如果这是一个愚蠢的问题，我在长时间的中断后返回代码，并且在尝试整理投资组合等时不得不重新学习很多基础知识。

在 ReactJS 中有没有一种方法可以在不使用材料 ui 或引导程序的情况下水平并排对齐组件？

这就是我想要创造的：-

  ----------------------------
  |                 |        |
  |   component 1   |  comp  |
  |-----------------|    3   |
  |                 |        |
  |  component 2    |        |
  ----------------------------

组件 3 下降到其他两个下方，如何对齐组件，是否可以不使用网格系统？

编辑：如果使用材质 ui 更好，你能解释一下我如何将组件 3 放置在 2 行上

Answer 1

解决此问题的最佳方法是使用 CSS Flexbox。例如，您可以拥有属性为 flex-direction: row; 的主容器，其中包含两个元素：一个属性为 flex-direction: column; 的容器包含组件 1,2 和另一个独立元素，即组件 3。