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

Question

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

我想让最后一个元素填满该行剩余的空间。如何实现？

示例 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概述了所需的前缀和遗留语法。