显示：为标题添加flex和新行 - 什么是正确的方式？ [英] Display: flex and new line for captions - what is the proper way?

问题描述

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

  // HTML / React 
 <根和GT; 
<内容> 
< ContentText>一些文字< / ContentText> 
<标题> 10步< /标题> 
<日期> 3月22日< /日期> 
< / Content> 
< / Root> 
 
 // CSS 
 .root {
 display：flex; 
宽度：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>`
  

和

 `<日期> 3月22日< /日期>`
  

实现如下所示的视图：
查看蓝图

我的问题是：

我应该在标题和日期类中使用什么CSS代码来实现这种效果，您可以在图片上看到。

还有最重要的事情 - 我想要尊重以前由更有经验的开发人员编写的项目代码，而不是我自己！

我希望我的代码适合自己。

对于noob问题抱歉 - 但这是我工作的第一天 -

解决方案

<将 flex-wrap：wrap 添加到 Container 然后mak使用ie width：100％;
$ ContentText 为100％ b $ b

以上将使得 ContentText 取得全宽，而 flex-wrap：wrap 将允许要包装的项目，因此将标题和日期推到一个新行。

堆栈片段

Root {display：flex;宽度：100％;身高：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; / *添加属性* / align-items：center; flex：1 0 auto; padding：0 8px;} ContentText {/ * added rule * / width：100％;}

 <根和GT; <内容> < ContentText>一些文字< / ContentText> < Caption> 10个步骤< / Caption> <日期> 3月22日< /日期> < / Content>< / Root>  

In a project that I recently joined I have code structure like this:

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

Now I need to create that two elements:

`<Caption>10 steps</Caption>`

and

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

To achieve view like this: View blueprint

My question is:

what css code should I use in caption and date class to achieve this effect that you can see on the picture.

And most important thing - I want to do it with respecting previous project code that was written by more experienced developers than I am!

I want my code to fit well.

Sorry for noob question - but this is my first day at work -.-

解决方案

Add flex-wrap: wrapto the Container and then make the ContentText be 100% wide, using i.e. width: 100%;

The above will make the ContentText take full width and the flex-wrap: wrap will allow the items to wrap, hence pushing the Caption and Date to a new line.

Stack snippet

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>

这篇关于显示：为标题添加flex和新行 - 什么是正确的方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！