2016-01-21 21 views
8

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> &rArr; 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:

Screenshot example

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 ...

Fixed width

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 ...

Flexbox

Huh, che non sembra troppo male. Non troppo male al-

Fail

... 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:

Result!!

Bella .

+0

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

+0

@chovy Mentre è vero, penso sia accettabile. Il risultato è proprio come 'text-align: justify' che è bello. –

risposta

8

Utilizzando flexbox, creare 3 o 4 elementi "fantasma" che occupano sempre gli ultimi slot.

Quindi, ad esempio, l'utente # 82 è attualmente l'ultima voce.

Fare utenti fittizi 83, 84, 85 con visibility: hidden.

In alternativa, provare solo un articolo fantasma alla fine con visibility: hidden e flex-grow: 10. Indicalo con la pseudo-classe :last-child o :last-of-type.

+1

Santo schifo che è pulito, e funziona anche se uso lo pseudo-elemento ':: after'. Bello! –

+1

Ho aggiunto uno screenshot del risultato dell'implementazione della soluzione alla fine della mia domanda in modo che possa essere visto. Grazie mille per questa idea! –

+1

Come espansione della seconda alternativa, questo oggetto fantasma può essere uno pseudo del contenitore. Non è necessario modificare il DOM e puoi scegliere come target direttamente anziché utilizzare last-child – vals

Problemi correlati