Implementar headers bonitos y responsives siempre es un proceso complicado. Para llevarlos a cabo, hasta ahora siempre has necesitado echar mano de los floats, usar la antigua chapuza de ajustar los píxeles manualmente para que se ajuste a lo que deseamos y de otros trucos complicados. ¡Pero ya no más!
La técnica que te vamos a mostrar se basa en el layout mode de Flexbox, el cual se encargará de hacer todo el trabajo sucio por ti. Tan solo te hará falta un puñado de propiedades CSS para crear un header que esté correctamente alineado y se vea bien en todas las resoluciones de pantalla, proporcionándote un código mucho más limpio y más elegante.
El código
En el código de ejemplo que puedes ver más abajo, hemos desarrollado un header, el cual está separado en tres secciones con el típico contenido de cabecera dentro de ellas:
Sección izquierda - El logotipo de la empresa.
Sección media - Varios enlaces.
Sección derecha - Un botón.
A continuación se puede ver una versión simplificada del código.
En la parte del HTML agrupamos las secciones, en etiquetas div separadas. Esto hace que sea más sencillo aplicar las reglas CSS y, en general genera un código mucho más organizado.
La parte del CSS, como habrás notado, solo son un par de líneas. Lleva a cabo el trabajo completo de encontrar los lugares correctos para cada una de las secciones.
El HTML
El CSS
header{
/* Enable flex mode. */
display: flex;
/* Spread out the elements inside the header. */
justify-content: space-between;
/* Align items vertically in the center. */
align-items: center;
}
Full Responsiveness
El truco del space-between se hará cargo de la alineación, incluso cuando cambies el tamaño de la pantalla. Sin embargo, cuando la ventana se torne demasiado pequeña para una cabecera horizontal, podemos hacer que se haga vertical, cambiando la propiedad flex-direction en una media-query.
@media (max-width: 1000px){
header{
/* Reverse the axis of the header, making it vertical. */
flex-direction: column;
/* Align items to the begining (the left) of the header. */
align-items: flex-start;
}
}
Esto resume nuestro tutorial rápido! Esperamos que haya encontrado útil y va a empezar a aplicarlo de forma inmediata. Flexbox tiene muy buen soporte del navegador en la actualidad, por lo menos que su base de usuarios es IE pesada, esta técnica se puede aplicar sin causar ningún caos.
Y este ha sido el artículo en el que trataba de mostraros la manera más sencilla de hacer headers responsive, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!