仅使用CSS将线扩展到全宽

Question

也许有人有任何明智的想法如何通过CSS替换我当前的解决方案之一的问题？我有一个有效的JS解决方案，只是好奇，如果只有一个CSS。

A）这里的元素具有相同的宽度，只有元素的数量发生变化（可以更多或更少）。

B）这条线应该扩展到这里为空的全宽（问题出在这里）。

C）文本是动态的（总是其他宽度）。

是否可以设置B）元素，因此它会填充宽度？

Answer 1

是的，Flexbox是可以的，您可以在线路上设置flex: 1，并且它们将占用剩余的可用空间。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;