html - Dimensionar y alinear correctamente los elementos flexibles en la última fila

css css3

Question

Digamos que tengo una lista de usuarios, y cada usuario tiene un número adjunto. Cada usuario aparece así:

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

Todos están diseñados con:

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

Aquí hay un ejemplo de ello en acción:

Bien, esto se ve bien, la lista de usuarios puede ser bastante larga, por lo que la compacidad es importante aquí. Mi problema es que ese borde derecho es terriblemente inconsistente, así que me pregunto si hay alguna manera de mejorar eso.

Mi primer pensamiento fue, por supuesto, solo establecer un ancho fijo en los tramos. Sin embargo, los anchos de nombre de usuario no son exactamente predecibles. Puede tener a alguien llamado iiiii y alguien llamado WWWWW pero como no se trata de una fuente monoespacial, obtiene "iiiii" y "WWWWW", con anchos muy claramente diferentes. Entonces, el "ancho máximo" sería básicamente el carácter más ancho permitido, que es W , multiplicado por la longitud máxima del nombre de usuario. Probemos eso ...

Ew. También podría usar un <ul> si ese es el resultado que voy a obtener. El siguiente pensamiento fue quizás algo relacionado con la display:table para que los anchos sean consistentes en todas las columnas, sin dejar de ser dinámica y, suponiendo que la mayoría de las personas tengan nombres de usuario razonables (* tos * ... oh, oye, así es como escapas de Markdown ... eh ...) - pero tiende a terminar con mucho espacio vacío todavía.

Entonces, mi idea actual es algún tipo de justificación-alineación. Eso funciona bastante bien para el texto, ¿verdad? Pero, por desgracia, text-align: justify fastidia con precisión todo en este caso, posiblemente porque no hay espacios entre los elementos para justificar.

Mi intento final fue usar flexbox, algo que ya estoy usando con buenos resultados en el nuevo diseño del sitio. Veamos cómo se ve con display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap; en el contenedor y flex: 1 0 auto; en los elementos ...

Huh, eso no se ve tan mal. No está mal en absoluto

... hm. Tan cerca. Lo que realmente me gustaría es que la última línea de elementos no se estire completamente. Está bien cuando hay tres o cuatro en la última línea, pero dos se ven un poco tontos y solo uno llena todo el ancho y se ve ridículo.

Así que supongo que toda esta pequeña aventura se reduce a una simple pregunta:

¿Cómo puedo lograr un comportamiento similar a justificar-alinear, en el que los elementos están espaciados para usar todo el ancho del contenedor, excepto en la última línea donde deberían usar su ancho natural?

Para completar esta pequeña historia, gracias a la respuesta de @ Michael_B, así es como he implementado la solución:

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

Y el resultado:

Hermosa.

Answer 1

Usando flexbox, cree 3 o 4 elementos "fantasmas" que siempre ocupan los últimos espacios.

Entonces, por ejemplo, el usuario # 82 es actualmente su última entrada.

Haga que los usuarios falsos 83, 84, 85 con visibility: hidden .

Alternativamente, pruebe con un solo elemento fantasma al final con visibility: hidden y flex-grow: 10 . Apunte con :last-child o :last-of-type pseudo-class.