Diciamo che ho un elenco di utenti e ad ogni utente è associato un numero. Ogni utente è elencato in questo modo:Dimensionamento e allineamento corretto degli elementi flessibili nell'ultima riga
<span><a href="/user/Niet">Niet</a> ⇒ 2</span>
Sono tutte arredate con:
.userlist>span {
display: inline-block;
padding: 2px 6px;
border: 1px solid currentColor;
}
Ecco un esempio di esso in azione:
Ok, questo sembra tutto a posto , l'elenco degli utenti può diventare piuttosto lungo, quindi la compattezza è importante qui. Il mio problema è che quel lato destro è orribilmente incoerente, quindi mi chiedo se c'è un modo per migliorarlo.
Il mio primo pensiero è stato, naturalmente, l'impostazione di una larghezza fissa sugli span. Tuttavia, le larghezze del nome utente non sono esattamente prevedibili. Si può avere uno che si chiama iiiii
e qualcuno ha chiamato WWWWW
ma dal momento che questo non è un font a spaziatura fissa si ottiene "iiiii" e "WWWWW", molto chiaramente diverse larghezze lì. Quindi la "larghezza massima" sarebbe in pratica il carattere più ampio consentito, ovvero W
, moltiplicato per la lunghezza massima del nome utente. Proviamo che ...
Ew. Potrei anche usare uno <ul>
se questo è il risultato che otterrò. Il prossimo pensiero era forse qualcosa che coinvolgesse lo display:table
per avere le larghezze coerenti tra le colonne, pur rimanendo dinamiche e - presumendo che la maggior parte delle persone abbia nomi utente ragionevoli (* cough * ... oh hey, ecco come sfuggire a Markdown ... huh. ..) - ma tende a finire con ancora molto spazio vuoto.
Quindi la mia idea attuale è una sorta di allineamento di giustificazione. Funziona abbastanza bene per il testo, giusto? Ma ahimè, text-align: justify
fa esattamente bugger tutto in questo caso, probabilmente perché non ci sono spazi tra gli elementi da giustificare.
Il mio ultimo tentativo è stato l'utilizzo di flexbox, qualcosa che sto già utilizzando con buoni risultati nel nuovo design del sito. Vediamo come si guarda con display: flex; flex-wrap: wrap;
sul contenitore, e flex: 1 0 auto;
sugli elementi ...
Huh, che non sembra troppo male. Non troppo male al-
... Hm. Così vicino. Quello che mi piacerebbe davvero è che l'ultima linea di elementi non si deformi completamente. Va bene quando ce ne sono tre o quattro nell'ultima riga, ma due sembrano un po 'sciocchi e solo uno riempie l'intera larghezza e sembra ridicolo.
quindi credo che questo intero piccola avventura si riduce ad una semplice domanda:
Come posso ottenere giustificano-align-simile comportamento, in cui gli elementi sono distanziati di utilizzare l'intera larghezza del contenitore, eccetto l'ultima linea in cui dovrebbero usare la loro larghezza naturale?
Per completare questa piccola storia, grazie a @ di Michael_B risposta, ecco come ho implementato la soluzione:
.userlist:after {
content: '';
flex: 10 0 auto;
}
E il risultato:
Bella .
Il problema con ': after {flex: 10 0 auto; } 'è che se hai il numero corretto nell'ultima riga lo mette a posto. È necessario applicare solo se si dispone di oggetti penzolanti nell'ultima riga. – chovy
@chovy Mentre è vero, penso sia accettabile. Il risultato è proprio come 'text-align: justify' che è bello. –