CSSだけを使って線を全幅に広げる

Question

CSSを使って私の現在の解決方法を問題の1つに置き換える方法がある人はいますか？ JS専用のソリューションがあるのか​​不思議ですが、JSソリューションがあります。ここで

A）要素は、同じ幅、構成要素の変更の数のみを（多かれ少なかれすることができる）を有します。

B）行は、ここでは空白の全幅に拡大されます（問題はここにあります）。

C）テキストは動的です（常に他の幅です）。

B）要素を設定して幅を埋めることはできますか？

Answer 1

はい、Flexboxとすることができます。ちょうどflex: 1を行に設定すれば、空き領域が残ります。

.content, 
 
.a { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    background: red; 
 
} 
 
.line { 
 
    flex: 1; 
 
    border-bottom: 1px dashed black; 
 
}

<div class="content"> 
 
    <div class="a"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
    <div class="line"></div> 
 
    <div class="text">Lorem ipsum.</div> 
 
    <div class="line"></div> 
 
    <div class="text">Text</div> 
 
</div>