pantalla - El menú css multiline abarca todo el ancho

css comment one line

Question

Es posible que ya haya soluciones o ejemplos para esto, pero no he podido encontrar uno.

Quiero crear un menú que tenga un número variable de elementos de menú, cada uno con diferentes anchuras (según su contenido). Si hay demasiados elementos de menú, me gustaría que ocupen más de una fila.

Mi primera solución fue un simple flotador. Estuvo bien, pero al final de las filas hay un espacio desigual desocupado:

Ignore que el "Texto" en los artículos tenga el mismo ancho. Yo solo chupo en el dibujo. Imagine que los textos tienen una longitud variable pero el mismo relleno a su alrededor.

Con un borde complicado (borde solo en el lado izquierdo de los elementos) puedo ocultarlo un poco, pero el área que se puede hacer clic sigue siendo la misma que las partes blancas de la imagen de arriba. Un efecto de desplazamiento también desenmascara el truco.

Luego investigué un poco sobre text-align justify y encontré soluciones como esta: "text-align: justify;" elementos de bloque en línea correctamente?

Por primera vez, esto es justo lo que quiero. Los elementos se alinean correctamente, llenan el espacio disponible a primera vista. Pero hay un defecto fundamental: tienen brechas entre ellos:

Esto es esperado ya que esto trata mis elementos como palabras en un texto. No he encontrado manera de arreglar esto.

Más tarde comencé a buscar en flexbox land . Esto parece prometedor. Flexbox parece ser el santo grial de CSS, pero todavía no he podido entenderlo.

Básicamente lo que quiero es esto:

Los botones llenan el espacio disponible, el menú es multilínea (cuando hay demasiados elementos para una línea), se puede hacer clic en el menú completo (con efecto de desplazamiento estacionario visible).

¿Hay alguna forma de hacer esto?

Tengo dudas sobre el uso de soluciones con Javascript (como calcular y ajustar el ancho de los elementos). Pero si hay una solución muy limpia para esto, podría terminar utilizándola.

EDITAR :

El menú aquí se ve bien, pero solo si el menú es de una sola línea. Esto piratea el último elemento al agregarlo a una lista diferente y al agregar mucho espacio con un invisible :after { content ". . ." } :after { content ". . ." } elemento.

Answer 1

Si usa los siguientes estilos de FlexBox, obtendrá lo que desee en IE10 y Chrome. Sin embargo, no creo que esto sea totalmente compatible en todos los navegadores.

HTML

<ul>
    <li>test test</li>
    <li>test</li>
    <li>test testtest</li>
    <li>testtest</li>
    <li>test</li>
    <li>test test test</li>
    <li>test test</li>
    <li>test</li>
</ul>

Css

ul {
    list-style:none; margin:0; padding:0; 
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px; 
}

li {
     white-space:nowrap;  
     border:1px solid #cccccc; 
     padding:5px; 
    -webkit-flex: auto;
    -moz-flex: auto;
    -ms-flex: auto ;
    flex: auto;
}

Ejemplo

Editar por el autor de la pregunta:

Pensé que debería actualizar esta respuesta ya que he aprendido algunas cosas sobre flexbox.

1. Al tratar con flexboxes multilínea, los prefijos de los proveedores son bastante inútiles. Es realmente difícil encontrar una versión de cualquier navegador que admita flexbox multilínea, pero con un prefijo de proveedor. Por lo general, el prefijo del proveedor se refiere a una versión anterior de flexbox donde las líneas múltiples se manejan de manera muy diferente.

2. Todos los principales navegadores admiten esto, excepto Firefox, pero una implementación ya está fusionada en alfa, por lo que aparecerá en Firefox 28 . La mayoría de los usuarios de escritorio verán su diseño (aún así es importante implementar un respaldo utilizable).

3. Es realmente fácil probar el soporte de FlexBox multilínea con Modernizr ya que la prueba del Modelo de caja flexible prueba específicamente la propiedad flex-wrap , que solo está presente en las implementaciones que la soportan. Está muy limpio implementar un float: left respaldo de la float: left para cada navegador que no lo hace.

Mi implementación final con un respaldo basado en Modernizr es la siguiente:

ul {
    /* general */
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.flexbox ul {
    display: flex;
    flex-flow: row wrap;
}
li {
    /* general */
    white-space: nowrap;
    border: 1px solid #555555;

    /* fallback */
    float: left;
}
.flexbox li {
    flex: auto;
}
li:first-child {
    /* general */
    text-align: right;
    order: 1;

    /* fallback */
    float: right !important;
}

Debería funcionar en todos los navegadores, aunque la implementación alternativa no es tan clara como la flexbox.

También li:first-child cuenta que li:first-child es el último elemento de la flexbox. Eso es porque la order: 1 propiedad. Todos los otros elementos tienen un order defecto de 0. Esto se debe a que era más fácil flotar hacia la derecha en el retorno de esta manera.