只用CSS擴展線條到全寬

Question

也許有人有任何明智的想法如何通過只有CSS代替我當前的解決方案到其中一個問題？我有一個工作JS解決方案，只是好奇，如果有一個CSS只。這裏

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>