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>`

要实现这样的观点： View blueprint

我的问题是：

我应该在标题和日期类中使用什么css代码来实现您在图片上看到的效果。

最重要的是 - 我希望尊重以前比我更有经验的开发人员编写的项目代码！

我希望我的代码能够很好地适应。

抱歉没有问题 - 但这是我工作的第一天 - .-

Answer 1

将flex-wrap: wrap添加到Container，然后使用ContentText

将width: 100%;设为100％宽

以上操作会使ContentText占据全宽，flex-wrap: wrap将允许项目换行，从而将Caption和Date推送到新行。< / p>

Stack snippet

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

显示：字幕的flex和新行 - 正确的方法是什么？

1 个答案: