Digamos que eu tenha uma lista de usuários e cada usuário tenha algum número anexado. Cada usuário é listado da seguinte maneira:

<span><a href="/user/Niet">Niet</a> &rArr; 2</span>

Eles são todos decorados com:

.userlist>span {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid currentColor;
}

Aqui está um exemplo disso em ação:

Ok, isso parece certo, a lista de usuários pode ficar bastante longa, então a compacidade é importante aqui. Meu problema é que essa margem direita é terrivelmente inconsistente, então estou me perguntando se há alguma maneira de melhorar isso.

Meu primeiro pensamento foi, é claro, apenas definir uma largura fixa nos vãos. No entanto, as larguras de nome de usuário não são exatamente previsíveis. Você pode ter alguém chamadoiiiii e alguém ligouWWWWW mas como essa não é uma fonte monoespaçada, você obtém "iiiii" e "WWWWW", com larguras claramente diferentes. Portanto, a "largura máxima" seria basicamente o caractere mais amplo permitido, que éW, multiplicado pelo tamanho máximo do nome de usuário. Vamos tentar isso ...

Ai credo. Eu poderia muito bem usar um<ul> se esse é o resultado que eu vou conseguir. O próximo pensamento foi talvez algo envolvendodisplay:table ter as larguras consistentes nas colunas, mantendo a dinâmica e - assumindo que a maioria das pessoas tem nomes de usuário sensatos (* tosse * ... oh ei, então é assim que você escapa do Markdown ... hein ...) - mas isso tende para acabar com muito espaço vazio ainda.

Então, minha ideia atual é algum tipo de alinhamento justificado. Isso funciona muito bem para texto, certo? Mas, infelizmente,text-align: justify faz exatamente isso, neste caso, possivelmente porque não há espaços entre os elementos a serem justificados.

Minha tentativa final foi usar o flexbox, algo que já estou usando com bom efeito no novo design do site. Vamos ver como fica comdisplay: flex; flex-wrap: wrap; no recipiente eflex: 1 0 auto; nos elementos ...

Huh, isso não parece tão ruim. Não é tão ruim assim

... Hum. Tão perto. O que eu realmente gostaria é que a última linha de elementos não fique esticada até o fim. Tudo bem quando há três ou quatro na última linha, mas dois parecem um pouco tolos e apenas um preenche toda a largura e parece ridículo.

Então, acho que toda essa pequena aventura se resume a uma pergunta simples:

Como posso obter um comportamento do tipo justificar-alinhar, no qual os elementos são espaçados para usar toda a largura do contêiner, exceto na última linha em que eles devem usar sua largura natural?

Para completar essa pequena história, graças à resposta de @ Michael_B, veja como implementei a solução:

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

E o resultado:

Bela.