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

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答案相关联作为可能的解决方案.

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

但它不起作用.看我的实施.

Answer 1

对于支持它的浏览器,自然的解决方案是使用灵活的布局模块,即flexbox - 这正是它的目的.以下是最基本的要点:

在Dabblet演示

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

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

这种方法的(不是无关紧要的)缺点是缺少浏览器支持以及随之而来的前缀和后备混乱,如果您需要支持旧浏览器.正如Rafael在评论中所建议的那样,这篇CSS Tricks文章概述了所需的前缀和遗留语法.