Cómo crear un header con flexbox

En este pequeño tutorial, vamos a ver cómo realizar un header o cabecera para nuestra página web de forma sencilla, con apenas unas pocas líneas de CSS, utilizando flexbox.

Toda web que se precie tiene un header, o cabecera, que suele contener elementos como el logotipo o nombre de la empresa o proyecto, así como el menú de navegación y otros elementos como buscadores, enlaces a redes sociales…etc.

Puede que si no tenemos mucha experiencia con CSS o si lo aprendimos hace años, realizar este tipo de acciones nos resulte un poco «engorrosas». Gracias que tenemos herramientas como flexbox para hacernos la vida más fácil.

Estructura de navegación

En nuestro caso, el más simple y habitual de todos, la cabecera de la página web va a contar con 2 elementos:

• Logotipo
• Menú de navegación
  

Lo primero que tenemos que hacer es, mediante HTML, definir estos elementos que van a componer el header.

<div class="wp-block-cgb-block-code-block"><div class="upmostly-block better-code-block"><div class="light"><pre><code class="html">&lt;header&gt;
  &lt;img src="ruta_de_tu_logo.png" class="logo" /&gt;
  &lt;nav role="menu"&gt;
     &lt;ul&gt;
       &lt;li&gt;Inicio&lt;/li&gt;
       &lt;li&gt;About us&lt;/li&gt;
       &lt;li&gt;Tienda&lt;/li&gt;
       &lt;li&gt;Contacto&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/nav&gt;
&lt;/header&gt;</code></pre></div></div><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script><script>hljs.initHighlighting();</script></div>

Ordenar los elementos

Aquí, con CSS y flexbox, llega la magia. Simplemente tenemos que decir al contenedor que queremos que se muestre como un elemento «flexible», de forma que podamos utilizar todas las propiedades de flexbox. A partir de este momento, ordenar los elementos que se encuentran dentro del contenedor, pasa a ser un «juego de niños».

header {
  display: flex;
}

De igual modo, vamos a indicar que el menú de navegación también sea un elemento flexible, para que así podamos ordenar y colocar los enlaces de navegación de forma fácil y cómoda.

nav ul {
  display: flex;
}

Una vez hemos hecho esto, ya solo nos faltaría aplicar una serie de propiedades de flexbox para obtener el comportamiento y estructura deseados.

En nuestro caso, el código CSS (relacionado con flexbox) quedaría así:

header {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  
}
nav ul {
  display: flex;
  justify-content: space-around;
}

Y el resultado sería el siguiente:

¿Y puedo trabajar con flexbox el responsive de mi web? Por supuesto, de hecho una de las ventajas de trabajar con flexbox es precisamente que todo el contenido de nuestra web es «flexible», por lo que se adapta sin problema al tamaño del dispositivo desde el que la estemos visitando.

Con un simple media-querie y cambiando el valor de una propiedad de flexbox (en este caso disponer el contenido en fila o columna), conseguiremos que, a partir de una resolución determinada, el menú se muestre bajo el logo, y también los elementos de navegación, uno debajo de otro (column).

@media screen and (max-width:600px) {
  header, nav ul {
    flex-direction: column;
    text-align: center;
  }
}

El resultado en móvil sería el siguiente:

Puedes ver el código completo en Codepen, donde hay alguna cosilla más para completar el diseño. En cualquier caso, con las pocas líneas de código que ves en esta entrada, ya tienes la estructura para crear tus header sin dolores de cabeza. ¿Y si quiero añadir más elementos a mi cabecera? Fácil: solo tenéis que añadir el o los elementos dentro del header de vuestro HTML y…voilà, ya lo tendréis.

Decidme qué os ha parecido este tutorial, y si queréis aprender más sobre está fantástica especificación de CSS, podéis contratar alguno de mis cursos donde encontraréis un curso específico sobre Flexbox, entre muchos más.