按最后一个元素填充剩余空间

Question

我有这样的事情：

 .container { width: 350px; border: 1px solid black; } .item { display: inline-block; padding: 10px 20px; background-color: green; } 

 <div class="container"> <div class="item"> Item 1 </div><div class="item"> Item 2 </div><div class="item"> Item 3 </div><div class="item"> Item 4 </div><div class="item"> Item 5 </div> </div> 

我需要让最后一项填充行中剩余的空间。 项目应按顺序放置。

（对不起，我的Google翻译... :(）

Answer 1

您可以使用css3 flexbox ：

.container {
  flex-wrap: wrap;
  display: flex;
}
.container .item {
  /* This property will expand the last item to the remaining width */
  flex-grow: 1;
}

 .container { flex-wrap: wrap; width: 350px; display: flex; } .item { border: 1px solid #000; background-color: green; padding: 10px 20px; flex-grow: 1; } 

 <div class="container"> <div class="item"> Item 1 </div><div class="item"> Item 2 Item 2 Item 2 </div><div class="item"> Item 3 </div><div class="item"> Item 4 </div><div class="item"> Item 5 </div> </div>