显示:flex and for Staidagions的新线路 - 正确的方法是什么

Question

在我最近加入的项目中，我有这样的代码结构：

// HTML / React
<Root>
  <Content>
    <ContentText>Some text</ContentText>
    <Caption>10 steps</Caption>
    <Date>March 22nd</Date>
  </Content>
</Root>
// CSS
.root {
  display: flex;
  width: 100%;
  height: 72px;
  align-items: center;
  border-radius: var(--radius-medium)px;
  border: 1px solid var(--color-gray2);
  padding: 12px 4px;
}
.content {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  padding: 0 8px;
} 

现在我需要创建两个元素：

`<Caption>10 steps</Caption>`

和

`<Date>March 22nd</Date>`

以这样的视图来实现：查看蓝图

我的问题是：

我应该在标题和日期类中使用哪些CSS代码来实现您可以在图片上看到的效果。

也是最重要的事情 - 我想尊重经验丰富的开发人员所写的先前项目代码，而不是我！

我希望我的代码适合。

对不起，菜鸟问题 - 但这是我工作的第一天-.-

Answer 1

将flex-wrap: wrap添加到Container，然后使用width: 100%;

使ContentText宽度为100％宽

以上将使ContentText全宽度，flex-wrap: wrap将允许项目包装，因此将Caption和Date推到新线路。

堆栈片段

Root {
  display: flex;
  width: 100%;
  height: 72px;
  align-items: center;
  border-radius: var(--radius-medium)px;
  border: 1px solid var(--color-gray2);
  padding: 12px 4px;
}
Content {
  display: flex;
  flex-wrap: wrap;             /*  added property  */
  align-items: center;
  flex: 1 0 auto;
  padding: 0 8px;
} 
ContentText {                  /*  added rule  */
  width: 100%;
}

<Root>
  <Content>
    <ContentText>Some text</ContentText>
    <Caption>10 steps</Caption>
    <Date>March 22nd</Date>
  </Content>
</Root>