Ho 32 voci di elenco separate in due listeche devono essere visualizzati come 5 per riga. Non riesco a modificare HTML e dato che ci sono 52 elementi, uno è sempre lasciato da solo. E prende l'intera larghezza di una riga, quando voglio che sia allineato a sinistra e il 20% come il resto. Come posso risolvere Questo?
Per rendere le cose più facili da capire, ecco il mio codice. Se c'è un modo migliore per farlo, per favore fatemelo sapere. Grazie!
.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>risposte:
1 per risposta № 1Il flex-grow valore 1 in flex: 1 20% li farà riempire lo spazio rimanente quando ce n'è uno, quindi cambiarlo in flex-basis: 20% e manterrà la stessa larghezza su tutti gli oggetti flessibili.
Rimuovere anche il justify-content: space-between altrimenti creerà uno spazio uguale tra tutti gli oggetti più di 1 ma meno di 5 impedendo loro di allineare a sinistra.
.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>