CSS

Maquetación

Flexbox

Con Flexbox podemos colocar los elementos con respecto a una de las dimensiones (la horizontal o la vertical), y a lo largo de esa dimensión controlar la proporción que ocupa cada elemento1. Para ello se utiliza la propiedad flex: flex-grow flex-shrink flex-basis; en los elementos de un contenedor con display: flex:

  • flex-grow: indica en qué proporción crecerá el elemento respecto del resto cuando sobre espacio.
  • flex-shrink: indica en qué proporción encogerá el elemento respecto del resto cuando falte espacio.
  • flex-basis: indica el tamaño inicial para el elemento antes de redistribuir el espacio.
<body>
<nav>
 <ul class="contenedor">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Nosotros</a></li>
  <li><a href="#">Productos</a></li>
  <li><a href="#">Contacto</a></li>
 </ul>
</nav>
</body>
.contenedor {
  display: flex;
  list-style: none;
  margin: 0;
  background: dodgerblue;
  padding: 0;
}
.contenedor li {
  flex: 0 1 0;
}
.contenedor li:first-child {
}
.contenedor a {
  font: 9px sans-serif;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 9px;
  color: white;
  user-select: none;
}
.contenedor li:hover {
  background: royalblue;
}

  1. Añade justify-content: center; al contenedor para centrar los elementos.

  2. Los elementos no están ocupando todo el espacio disponible en la dimensión horizontal2 porque tienen un valor de flex-grow igual a 0. Cambia el valor a 1 en la propiedad flex para que crezcan todos con la misma proporción.

  3. Si, por ejemplo, quisiéramos que ocupara 4 veces más "Inicio" usaríamos flex: 4 1 0;. Añade esa propiedad al primer elemento.

  4. Para simular una situación en la que se encoge el elemento, podemos poner un tamaño inicial grande al resto: usa flex: 1 4 0; en el primero y flex: 1 1 180px; en el resto.

    ❓ Ejercicio 1: Comprueba visualmente que encoger 4 veces el primer elemento es igual a hacer 4 veces más grande el resto de elementos.

Vamos a combinar los conceptos de pseudoclase, posición y maquetación, que ya hemos visto, para crear un sub-menú desplegable al pasar el ratón por encima de los menús anteriores.

❓ Ejercicio 2: Coloca el siguiente HTML, que representa un sub-menú, dentro de uno de los menús anteriores (después del </a>):

1. HTML del sub-menú... 
<ul class="submenu">
  <li><a href="#">Submenú 1</a></li>
  <li><a href="#">Submenú 2</a></li>
</ul>
2. Añade y completa las ? del siguiente CSS... 
.submenu {
  display: none;
  list-style: none;
  padding: 0;
  background: dodgerblue;
  position: ?
}
.submenu > li:? {
  background: royalblue;
}
.contenedor > li:? > .submenu {
  display: block;
}

1

Usar tamaños fijos no ayuda a adaptar el contenido a diferentes tamaños de pantalla. Usando proporciones podremos encoger o crecer en función del espacio disponible en cada pantalla.

2

Para cambiar la dimensión sobre la que se distribuyen los elementos usa flex-direction: column; en el contenedor. Si no se indica, se utiliza por defecto la dimensión horizontal flex-direction: row;.