CSS로만 전체 너비 확장하기

Question

누군가 현재 솔루션을 CSS를 통해 문제 중 하나로 대체하는 방법에 대한 아이디어가 있습니까? CSS가있는 경우 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>