フレックス付きの行ごとに5つのアイテムが左揃え

Question

32個のリストアイテムが2つのリストに分かれており、1行につき5個表示する必要があります。私はHTMLを編集することはできませんし、52の項目があるので、1つは常に単独で残されています。そして、それは行の幅全体を取ります。残りの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は1つが存在するとき、それらは、残りのスペースを埋める作るので、flex-basis: 20%に変更し、それがすべてのフレックス項目に同じ幅を維持しますします。

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>