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-grow价值1在flex: 1 20%将使他们填补剩余空间时，有一个，所以将其更改为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>