显示：为标题添加flex和新行 - 什么是正确的方式？

为标题添加flex和新行

关注

发信

关注(28)粉丝(399)

显示：为标题添加flex和新行 - 什么是正确的方式？

本文介绍了显示：为标题添加flex和新行 - 什么是正确的方式？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  
 $  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和新行 - 什么是正确的方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-24 16:19