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

Question

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

我希望最后一个元素填充该行的剩余空间。如何实现这一目标？

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

CSS示例

.tags { border: solid 1px #000; padding: 0; }
.tags__item {
  display: inline-block;
  margin: 2px;
  padding: 1px 5px;
  background: #eee;
  border: solid 1px #eee;
}
.tags__item:last-child {
  background: #fff;
  border: dashed 1px #eee;
}

尝试＃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%
}

此解决方案适用于单行。但是，它不允许包装。 http://cdpn.io/omFuy

尝试＃2（不起作用）

其他人与另一个SO answer相关联，作为可能的解决方案。

.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;
}

但它不起作用。 See my implementation

Answer 1

对于支持它的浏览器，自然的解决方案是使用flexible layout module，即flexbox - 这正是它的目的。以下是最基本的要点：

<强> Demo on Dabblet

.tags {
    display: flex;
    flex-wrap: wrap;
}

.tags__item:last-child {
    flex: auto;
}

这种方法的（不是无关紧要的）缺点是lack of browser support以及随之而来的一堆前缀和后备，如果你需要支持旧的浏览器。正如评论中Rafael所建议的那样，此CSS Tricks article概述了所需的前缀和旧语法。

Answer 2

绝对不是最好的解决方案......但我只是没有拒绝尝试使用javascript解决方案。

http://codepen.io/rafaelcastrocouto/pen/morlb

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