html - 仅使用 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>