Flexbox: un menú de verdad · Programa con Martin

Aprende a alinear cajas una al lado de otra, y tu menú parecerá sacado de un sitio web real.

Te lo muestro: cajas una al lado de otra

Los enlaces de tu menú ahora mismo están en la página uno tras otro, un poco como palabras en una frase. Un menú de verdad tiene sus elementos alineados ordenadamente, uno al lado del otro, con espacio. CSS tiene una herramienta para alinear cajas llamada flexbox:

nav {
  display: flex;    /* this box's children line up side by side */
  gap: 16px;        /* space between them */
}

Eso es todo. display: flex le dice a la caja: «Alinea a tus hijos (los enlaces, aquí) en fila.» Y gap pone el espacio entre ellos. Flexbox puede hacer mucho más:

nav {
  display: flex;
  gap: 16px;
  justify-content: center;   /* center children horizontally */
  align-items: center;       /* also align them to the middle vertically */
  flex-wrap: wrap;           /* if they don't fit, wrap to the next line */
}

Te lo muestro: un menú como el de un sitio web real

Combinemos todo lo que ya sabes con flexbox:

header {
  background-color: #1d4ed8;   /* a colored bar at the top */
  padding: 16px;
}

header h1 {
  color: white;
  margin: 0;                   /* heading without its default spacing */
}

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;       /* remove the underline from links */
  padding: 8px 14px;
  border-radius: 999px;        /* fully rounded ends = a pill shape */
  background-color: rgba(255, 255, 255, 0.15);  /* semi-transparent white */
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

Algo nuevo al final: :hover significa «cuando pasas el ratón por encima». El elemento del menú se ilumina al pasar el ratón – exactamente como en los sitios web que conoces.

Ahora tú 💪

Convierte tu menú en un menú de verdad: una barra de color a todo lo ancho de la cabecera, elementos uno al lado del otro como pastillas, que se iluminan al pasar el ratón. Usa colores de tu paleta de la lección 6.

🏫 Sitio web del colegio – solución (azul)

header {
  background-color: #1d4ed8;
  padding: 16px;
}

header h1 { color: white; margin: 0; }

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
}

nav a:hover { background-color: rgba(255, 255, 255, 0.35); }

🙋 Sitio web personal – solución (naranja)

El mismo código, solo cambia el color de la cabecera:

header {
  background-color: #ea580c;
  padding: 16px;
}

🌍 Diario de viajes – solución (verde)

El mismo código, solo cambia el color de la cabecera:

header {
  background-color: #15803d;
  padding: 16px;
}

⚽ Sitio web del club – solución (color del club)

El mismo código, solo cambia el color de la cabecera por el de tu club:

header {
  background-color: #b91c1c;
  padding: 16px;
}

💡

¿Quieres el nombre a la izquierda y el menú a la derecha, en una línea? Envuelve la cabecera en otro flexbox: añade header { display: flex; justify-content: space-between; align-items: center; }. La propiedad space-between significa «separa a los hijos: el primero a la izquierda, el último a la derecha».

✅

Compruébalo tú: Hay una barra de color arriba en tu sitio web, con un nombre blanco y elementos del menú con forma de pastilla que se iluminan al pasar el ratón. Recuerda – como el CSS es compartido, el menú cambió en todas las páginas a la vez.

Lo que te llevas de esta lección

display: flex alinea los hijos de una caja en fila, gap pone espacio entre ellos.
justify-content y align-items alinean cosas, flex-wrap: wrap deja que se envuelvan.
:hover = «cuando el ratón pasa por encima». Un pequeño brillo hace que un sitio web se sienta vivo.