如何使父容器与其中的文本成比例，尤其是在内容和屏幕缩小的情况下

在前端开发中，可以使用CSS的flexbox布局来实现父容器与其中的文本成比例，尤其是在内容和屏幕缩小的情况下。

具体实现步骤如下：

1. 创建一个父容器，可以使用div元素，并为其设置一个固定的宽度或者百分比宽度。
2. 在父容器中添加文本内容，可以使用p、span等元素来包裹文本。
3. 使用CSS的flexbox布局，为父容器设置display: flex;属性，使其成为一个flex容器。
4. 设置flex容器的flex-direction属性，可以选择row（水平方向）或column（垂直方向）来决定文本的排列方向。
5. 设置flex容器的align-items属性，可以选择flex-start、center、flex-end等值来决定文本在父容器中的垂直对齐方式。
6. 设置flex容器的justify-content属性，可以选择flex-start、center、flex-end等值来决定文本在父容器中的水平对齐方式。
7. 使用flex容器的flex属性来控制文本在父容器中的比例关系。可以为文本所在的元素设置flex属性，值为一个数字，表示该元素在父容器中所占的比例。比如，设置一个元素的flex属性为1，另一个元素的flex属性为2，表示第一个元素所占比例为1/3，第二个元素所占比例为2/3。

以下是一个示例代码：

<div class="container">
  <p class="text">文本内容</p>
  <p class="text">文本内容</p>
</div>

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.text {
  flex: 1;
}

在上述示例中，父容器的宽度被设置为100%，文本内容被包裹在p元素中，并且每个p元素的flex属性被设置为1，表示两个文本在父容器中所占比例相等。通过设置父容器的align-items属性为center，可以使文本在垂直方向上居中对齐。通过设置父容器的justify-content属性为space-between，可以使文本在水平方向上均匀分布。

这样，在内容和屏幕缩小的情况下，父容器与其中的文本将保持成比例的关系。