En este artículo, explicaré cómo crear una barra de navegación que se adapte a varios tamaños de pantalla usando Flexbox junto con consultas de medios.
Este tutorial también se puede encontrar como un screencast interactivo en mi curso gratuito Flexbox en Scrimba.
Para leer más sobre el curso, consulte este artículo.
La puesta en marcha
Comencemos con el marcado de una barra de navegación muy simple:
- Home
- Profile
- Logout
los
-
elemento es nuestro contenedor flexible y el
Los elementos son nuestros elementos flexibles. Para convertirlo en un diseño de Flexbox haremos:.container { display: flex; }Lo que resultará en el siguiente diseño:
Agregué algo de estilo, pero eso no tiene nada que ver con Flexbox.
Como puede ver, tenemos un poco de espacio adicional en el lado derecho. Esto se debe a que Flexbox dispone los elementos de izquierda a derecha, y cada elemento es tan ancho como lo obliga su contenido.
Dado que el contenedor flexible por defecto es un elemento de nivel de bloque (y es más ancho que los cuatro elementos) obtenemos el espacio al final.
La razón por la que los elementos de búsqueda son más anchos que los demás es porque los campos de entrada están configurados de forma predeterminada en
size="20", que los diferentes navegadores y sistemas operativos interpretan de diferentes maneras.Capacidad de respuesta # 1
Para darle a nuestra barra de navegación la capacidad de respuesta básica, simplemente le daremos al elemento de búsqueda un valor flexible de 1.
.search { flex: 1; }Esto da como resultado que el elemento de búsqueda se expanda y contraiga con el ancho del contenedor, lo que significa que no obtendremos el espacio adicional en el lado derecho.
Si bien tiene sentido hacer que el elemento de búsqueda crezca mientras los demás permanecen fijos, podría argumentar que puede volverse demasiado amplio en comparación con los demás. Entonces, si prefiere que todos los elementos crezcan con el ancho del contenedor, simplemente puede dar a todos los elementos un
flexvalor de 1..container > li { flex: 1; }Así es como se desarrolla eso:
También puede dar a los elementos diferentes valores de flexión, lo que los haría crecer con diferentes velocidades. Siéntase libre de experimentar con eso en este parque infantil de Scrimba.
Para el resto del tutorial, continuaremos con la primera solución, donde los elementos de búsqueda son los únicos que tienen un
flexvalor.Capacidad de respuesta # 2
Nuestra barra de navegación funciona bien en pantallas anchas. Sin embargo, en los más estrechos se mete en problemas, como puede ver aquí:
En algún momento, no es viable tener todos los elementos en la misma fila, ya que el contenedor se vuelve demasiado estrecho. Para resolver esto, agregaremos una consulta de medios donde dividiremos nuestros cuatro elementos en dos filas. La consulta de medios se activará cuando la pantalla tenga 600 píxeles de ancho:
@media all and (max-width: 600px) { .container { flex-wrap: wrap; } .container > li { flex-basis: 50%; } }Primero, permitimos que el diseño de Flexbox se ajuste
flex-wrap. Esto está configurado de forma predeterminada ennowrap, por lo que tendremos que cambiarlo awrap.Lo siguiente que hacemos es establecer el
flex-basisvalor de los elementos en 50%. Esto le dice a Flexbox que haga que cada elemento ocupe el 50% del ancho disponible, lo que da como resultado dos elementos por fila, así:
Nota: También he centrado el texto del marcador de posición en el campo de entrada de búsqueda.
Ahora tenemos dos estados diferentes. Sin embargo, este diseño aún no funciona en pantallas muy pequeñas, como las pantallas móviles en modo vertical.
Si seguimos encogiendo la pantalla, acabará como en la imagen de abajo.
Lo que sucedió aquí es que en la segunda fila ya no caben dos elementos.
El cierre de sesión y los elementos de búsqueda son simplemente demasiado anchos, ya que no puede reducirlos por debajo de su ancho mínimo, que es el ancho que necesitan para llenar el contenido dentro de ellos.
Sin embargo, los elementos de inicio y perfil todavía pueden aparecer en la misma fila, por lo que Flexbox les permitirá hacerlo. Esto no es óptimo, ya que queremos que todas nuestras filas se comporten de la misma manera.
Capacidad de respuesta # 3
Tan pronto como una de las filas no pueda caber en dos elementos en el ancho, queremos que ninguna de las filas tenga dos elementos en el ancho. En otras palabras, en pantallas muy pequeñas haremos la barra de navegación vertical. Apilaremos los artículos uno encima del otro.
Para lograr esto, simplemente necesitamos cambiar nuestro 50% de ancho a 100%, de modo que cada fila solo se ajuste a un solo artículo. Agregaremos este punto de interrupción en 400px.
@media all and (max-width: 400px) { .container > li { flex-basis: 100%; } .search { order: 1; } }Además de esto, me gustaría colocar el elemento de búsqueda en la parte inferior, por lo que también estoy orientando la búsqueda y le doy un
ordervalor de 1.Esto da como resultado lo siguiente:
La razón
order: 1;por la que el elemento de búsqueda se coloca en la parte inferior es porque los elementos flexibles por defecto tienen un valor de cero, y cualquier elemento que tenga un valor más alto que ese se colocará después de los demás.Para ver cómo se desarrolla todo, aquí está el gif de la parte superior del artículo:
¡Felicidades! Ahora sabe cómo crear una barra de navegación totalmente receptiva utilizando Flexbox y consultas de medios.
Si está interesado en aprender más sobre Flexbox, le recomiendo que consulte mi curso gratuito en Scrimba.
¡Gracias por leer! Mi nombre es Per Borgen, soy el cofundador de Scrimba, la forma más fácil de aprender a codificar. Debe consultar nuestro bootcamp de diseño web receptivo si desea aprender a construir un sitio web moderno a nivel profesional.
