css - 同等大小的弹性增长项目

我正在寻找一种方法来使弯曲项目的最后一行中的元素与完整行中的元素相同 - 而不使用JS。 Flexbox似乎很有希望找到解决方案，但问题是，如果有额外的空间，最后一行的项目会更宽。有更好的方法吗？

.flex-container {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  min-width: 100px;
  max-width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  flex-grow: 1;
}

<!DOCTYPE html>
<html>
<body>
<div class="flex-container">
  <div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div><div>item</div>
</div>
</body>
</html>

同等大小的弹性增长项目

0 个答案: