Demostración de navegación de barra Flexbox | Programar Plus

Alguien me escribió preguntándome cómo crear una barra de navegación simple con íconos. Este es un diseño bastante simple que podría lograrse de muchas maneras diferentes. La lista de elementos como bloque en línea probablemente tenga más sentido en general.

Pero he estado disfrutando jugando con flexbox, así que decidí lanzarlo junto con eso, y creo que fue un ejemplo bastante educativo.

Aquí está:

Vea la navegación de la barra de lápiz con iconos Flexbox y SVG de Chris Coyier (@chriscoyier) en CodePen.

Flexbox facilita la alineación de los elementos como desee:

Flexbox facilita que los elementos del menú ocupen todo el espacio que necesiten, sin especificar números exactos:

Pero si desea aplicar números exactos, puede:

Los elementos flexibles pueden ajustarse y las propiedades pueden cambiar con consultas de medios:

Los artículos flexibles son fáciles de alinear como quieras, incluso verticalmente, incluso centrados:

En la demostración, no dude en activar los contornos para ver cómo se alinean los cuadros.

Me doy cuenta de que no todos pueden usar flexbox en todo lo que trabajan. Yadda yadda compatibilidad con navegadores, clientes, etc. Algunas personas pueden, en algunos proyectos. Después de jugar con cosas como esta, creo que queda claro lo importante que se volverá.

(Visited 6 times, 1 visits today)