html - 每行五个元素，带 flex，左对齐

Question

我有 32 个列表项，分为两个列表，每行需要显示 5 个。我无法编辑 HTML，因为有 52 个元素，所以总是有一个单独保留。当我希望它左对齐时，它占据了一行的整个宽度，其余部分占 20%。我该如何解决这个问题？

为了让事情更容易理解，这是我的代码。如果有更好的方法来做到这一点，请告诉我。谢谢!

.container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-between;
  list-style: none;
  margin-left: 0;
}

.item {
  flex: 1 20%;
  text-align: center;
  font-size: 15px;
}

<ul class="container">
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
</ul>
<ul class="container">
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
</ul>

Answer 1

flex: 1 20% 中的flex-grow 值1 会在有一个的时候让它们填满剩余的空间，所以改变它到 flex-basis: 20% 并且它将在所有 flex 元素上保持相同的宽度。

同时删除 justify-content: space-between 否则它会在任何大于 1 但小于 5 的元素之间创建一个相等的空间，防止它们左对齐。

.container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;  
  list-style: none;
  margin-left: 0;
}

.item {
  flex-basis: 20%;
  text-align: center;
  font-size: 15px;
}

<ul class="container">
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
</ul>
<ul class="container">
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
  <li class="item">Content</li>
</ul>