在 React 中水平对齐几个组件

Question

我有三大组件。其中两个占据了屏幕的 1/3 左右，我的目标是从左到右水平地呈现它们。

当像我添加的代码一样将它们放入时，它们垂直地一个接一个地呈现，这导致 uder 向下滚动以找到它们。如何在屏幕上水平呈现它们？（我用 css 尝试了几件事，但没有成功）。

这是返回方法，Tables 组件在其中包含两个不同的表：

 return (
      <div>
        {title} <Chat />
        <Tables/>}

      </div>
    );

Answer 1

你应该看看 flexboxes ！

您可能知道，React 允许您创建组件，因此您可以像使用 flexboxes 的 html 元素一样设置它们的样式。

一定要读这篇文章！

编辑：示例

HTML：

<div class="flexbox-container">
    <div>Element1</div>
    <div>Element2</div>
    <div>Element3</div>
</div>

CSS：

.flexbox-container {
    display: flex;
    flex-direction: row;
}

这将使您的元素水平对齐，间距均匀！尝试使用容器的边距和 justify-elements 来对齐元素。