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

Question

我有这样的事情：

＆＃13;

＆＃13;

.container {
  width: 350px;
  border: 1px solid black;
}

.item {
  display: inline-block;
  padding: 10px 20px;
  background-color: green;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我需要让最后一个项目填充自己的剩余空间。物品应按顺序放置。

（抱歉我的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>