如何使动态ReactJS组件高度匹配，内容对齐？

Question

使用ReactJS，我将根据动态状态值生成组件的内容。

我希望距离匹配，而不是像下面的图片那样，当呈现较长的字符串时(如上面的文本)，我的组件高度变得不相等，下面的文本组件也向下跳跃：

​

我现在使用的代码是Rebass来创建两个父列，对于其中的组件中的文本，我使用了如下样式的组件：

const Title = styled.h1`
font-family: "Raleway", sans-serif;
font-style: slim;
font-weight: 300;
font-size: 1em;
text-align: center;
color: black;
`;

const Text = styled.h6`
font-family: "Raleway", sans-serif;
font-weight: 300;
font-style: thin100;
text-align: justify;
color: black;
`;

在render()中：

<Title>{this.props.title}</Title>
<Text>
  <b>Cuisine: </b>
  {this.props.cuisine.toString().replace(/,/g, " ")}
</Text>

让我的组件对齐的最佳方法是什么？我必须给每个文本元素一个固定的高度吗？如果是这样的话，最好的方法是什么？

谢谢!

Answer 1

如果你知道你永远不会得到三行，你可以将高度固定为匹配两行的大小。这样，在只有一行的情况下，间距将是相同的。

另一种方法是，如果您想保持标题在顶部，笑脸在底部，其他内容在中间，将justify-content: space-between放在父元素上，以便在屏幕上传播这三个内容。