仅使用 CSS 将行扩展到全宽

【问题标题】：Expanding line to full width with only CSS仅使用 CSS 将行扩展到全宽
【发布时间】：2016-08-15 20:13:45
【问题描述】：

也许有人对如何仅通过 CSS 替换我当前对其中一个问题的解决方案有什么好主意？我有一个可行的 JS 解决方案，只是好奇是否有一个纯 CSS 的解决方案。

A) 这里的元素宽度相同，只是元素的数量不同（可以多也可以少）。

B) 该行应该扩展为全宽，此处为空（问题出在此处）。

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

是否可以设置 B) 元素，使其填充宽度？

【问题讨论】：

你是从什么开始的吗？如果是，请提供您的初始 CSS，我想使用它

标签： html css fluid-layout

【解决方案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>

【讨论】：

在我的国家拥有超过 92% 的 flexbox 支持，我绝对应该开始越来越多地使用它。感谢你的回答。我接受它:)