Cómo crear una barra de navegación totalmente receptiva con Flexbox

Una barra de navegación, tres diseños diferentes.

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 de 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:

El elemento

    es nuestro contenedor flexible y los elementos
  • son nuestros elementos flexibles. Para convertirlo en un diseño Flexbox haremos:

    .envase {
      pantalla: flex;
    }

    Lo que dará como resultado el siguiente diseño:

    He agregado algunos estilos, pero eso no tiene nada que ver con Flexbox.

    Como puede ver, tenemos un poco de espacio extra en el lado derecho. Esto se debe a que Flexbox presenta los elementos de izquierda a derecha, y cada elemento es tan ancho como su contenido lo obliga a ser.

    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 otros es porque los campos de entrada están configurados por defecto en size = "20", que diferentes navegadores y sistemas operativos interpretan de diferentes maneras.

    Capacidad de respuesta n. ° 1

    Para dar a nuestra barra de navegación una capacidad de respuesta básica, simplemente le daremos al elemento de búsqueda un valor flexible de 1.

    .buscar {
      flexión: 1;
    }

    Esto hace que el elemento de búsqueda se expanda y se reduzca con el ancho del contenedor, lo que significa que no obtendremos el espacio adicional en el lado derecho.

    Si bien tiene sentido que el elemento de búsqueda crezca mientras los demás permanecen fijos, podría argumentar que puede ser demasiado amplio en comparación con los demás. Entonces, si prefiere que todos los artículos crezcan con el ancho del contenedor, simplemente puede dar a todos los artículos un valor flexible de 1.

    .container> li {
      flexión: 1;
    }

    Así es como se desarrolla:

    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 patio de recreo Scrimba.

    Para el resto del tutorial, continuaremos con la primera solución, donde los elementos de búsqueda son los únicos con un valor flexible.

    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 artículos 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 iniciará cuando la pantalla tenga 600 píxeles de ancho:

    @media all y (ancho máximo: 600 px) {
      
      .envase {
        flex-wrap: envoltura;
      }
      
      .container> li {
        base flexible: 50%;
      }
    }

    Primero permitimos que el diseño de Flexbox se ajuste con flex-wrap. Esto está configurado de forma predeterminada en nowrap, por lo que tendremos que cambiarlo para ajustarlo.

    Lo siguiente que hacemos es establecer el valor de base flexible de los artículos al 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, como este:

    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 todavía no funciona en pantallas muy pequeñas, como las pantallas móviles en modo vertical.

    Si seguimos reduciendo la pantalla, terminará como la imagen de abajo.

    Lo que sucedió aquí es que la segunda fila ya no puede caber 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 aún 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, no queremos que ninguna de las filas tenga dos elementos en el ancho. En otras palabras, en pantallas muy pequeñas haremos que la barra de navegación sea vertical. Apilaremos los artículos uno encima del otro.

    Para lograr esto, simplemente necesitamos cambiar nuestro ancho del 50% al 100%, de modo que cada fila solo se ajuste a un solo elemento. Agregaremos este punto de interrupción a 400 px.

    @media all y (ancho máximo: 400 px) {
      .container> li {
        base flexible: 100%;
      }
      .buscar {
        orden: 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 valor de pedido de 1.

    Esto da como resultado lo siguiente:

    El orden de la razón: 1; resulta en que el elemento de búsqueda se coloca en la parte inferior porque los elementos flexibles tienen un valor predeterminado de cero, y cualquier elemento que tenga un valor mayor 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.

    Haga clic en la imagen para acceder a mi curso gratuito de Flexbox.

    ¡Gracias por leer! Mi nombre es Per, soy cofundador de Scrimba y me encanta ayudar a las personas a aprender nuevas habilidades. Sígueme en Twitter si deseas recibir notificaciones sobre nuevos artículos y recursos.