Css 如何使一系列包装的内联块元素中的最后一个元素填充可用的水平空间？

我有一个元素，它将包含未指定数量的内联块元素，如果有足够的元素，这些元素可能会换行

我希望最后一个元素填充行上的剩余空间。如何做到这一点

示例HTML

<div class="tags">
  <span class="tags__item">First Tag</span>
  <span class="tags__item">Another One</span>
  <span class="tags__item">Long Tag Name Here</span>
  <span class="tags__item">Last tag should fill</span>
</div>

尝试#1（不起作用） 一个答案（已删除）提到尝试这样的表格单元格布局

.tags {
  border: solid 1px #000; 
  display: table-row;
  white-space: nowrap;
}
.tags__item {
  display:table-cell;
  width:auto;
  margin: 2px;
  padding: 1px 5px;
  background: #eee;
}
.tags__item:last-child {
  background: #fff;
  border: dashed 1px #ccc;
  width:99%
}

此解决方案对于一条生产线相当有效。但是，它不允许包装

尝试#2（不起作用） 其他人链接到另一个人作为可能的解决方案

.tags {
  border: solid 1px #000; 
}
.tags__item {
  display: block;
  float: left;
  margin: 2px;
  padding: 1px 5px;
  background: #eee;
}
.tags__item:last-child {
  float: none;
  display: block;
  border: dashed 1px #ccc;
  background: #fff;
}
.tags__item:last-child::after {
  clear:both;
}

---

但是它不起作用

对于支持它的浏览器，自然的解决方案是使用flexbox，也就是flexbox，这正是它想要的场景。以下是基本要素：

.tags{
显示器：flex；
柔性包装：包装；
}
.tags\uu项：最后一个子项{
flex：自动；
}

---

这种方法的缺点（并非无关紧要）是，如果您需要支持较旧的浏览器，那么它会导致前缀和回退的混乱。正如在评论中所建议的，这概述了所需的前缀和遗留语法。

肯定不是最好的解决方案。。。但我并没有拒绝尝试javascript解决方案

.tags {
  border: solid 1px #000; 
}
.tags__item {
  display: block;
  float: left;
  margin: 2px;
  padding: 1px 5px;
  background: #eee;
}
.tags__item:last-child {
  float: none;
  display: block;
  border: dashed 1px #ccc;
  background: #fff;
}
.tags__item:last-child::after {
  clear:both;
}

---

仍然需要检查“换行符”，但它可能很有用，因为jQuery可能会打开这个跨浏览器。

@Milche：这些是“如果这个问题得到了一个有效的答案，那就太棒了，我可以自己使用它！”投票（因为如果没有

表

仿真，这是可能的）@milchepaten这是一个很好的问题，我认为这对其他人（和我自己）都是有益的，任何尝试都是如此简单和明显，以至于我认为将失败的代码放入其中是愚蠢的。完全相关：看看这里的答案：你是凡人之王！谢谢很好用@jessegavin Aw，嘘！：）不过，有一条建议：对flexbox的支持还远远不够完美！这在非常现代的浏览器中很有魅力，但在旧的UAs中发挥作用之前，您需要添加相当多的前缀和回退。谢谢您的回答。在添加额外的

元素时，我看到一些奇怪的行为。对于你拥有的确切跨距数来说，它似乎非常有效。是的，它确实发生了。。。为了使它成为一个好的解决方案，还有很多改进。。。你应该选择一个库，比如CSS框架能解决这个特殊的问题吗？如果是，哪一个？它是如何解决的？我使用引导，但它没有任何内置的地址。你可以去。。。我从来没用过，但看起来很不错。。。这一切都只是css。。。你不会错的！