使用flexbox来根据内容的宽度创建span的方法
P粉726234648
2023-08-15 12:26:13
<p>我已经在宽度固定的flex-row父元素中使用了span和div</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.parent {
display: flex;
flex-direction: row;
width: 230px;
background-color: blue;
}
.child1 {
background-color: red;
}
.child2 {
min-width: 40px;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="parent">
<span class="child1">这是span中的一些文本</span>
<div class="child2"/>
</div></pre>
<p><br /></p>
<p>我希望span始终与文本的宽度相同，而div则占据父元素剩余的整个宽度。现在（如您在代码片段中所见），当文本移到新行时，红色背景区域的宽度比文本宽。如何修复这段代码？我需要红色背景正好结束在文本的边缘</p>
也许你可以将
parent设置为网格并使用fr单位进行测量？这将使文本容器的宽度与文本的确切宽度相同，并使剩余的容器占据剩余空间的1份（没有其他容器会占据100%的空间）。
对于行显示，只需将columns更改为rows。