La dirección del eje principal

La lista está lista. Pasemos a los estilos de distribución de cada tarjeta.

Fíjate en el orden de los elementos dentro de las tarjetas. En el diseño, primero está la imagen y después el encabezado. En el HTML ocurre al revés:

<li class="card current">
  <h3 class="title">Lima</h3>
  <img class="image" src="img/lime.jpg" alt="Lima">
  <p class="description">Un toque ácido y un aroma único.</p>
  <a class="add-link" href="#">+ Agregar</a>
</li>

Conviene conservar el orden del HTML: por su significado, el encabezado de la sección debe aparecer antes que el contenido al que se refiere. ¿Qué hacemos entonces? ¡Cambiamos el orden visual de los elementos!

La propiedad order permite controlar el orden visual de los elementos. Funciona en contenedores grid y flex, pero nuestras tarjetas son elementos <li> de tipo bloque. Para usar order, tendremos que cambiar el tipo de caja de las tarjetas. Tanto grid como flexbox sirven para esta distribución; en este ejercicio usaremos flexbox.

Si simplemente convertimos las tarjetas en contenedores flex, los elementos se colocarán en una fila y la distribución se romperá. Para conservar el flujo de arriba hacia abajo, tendremos que girar el eje principal del contenedor flex.

La propiedad flex-direction controla la dirección del eje principal. Su valor predeterminado es row (fila), pero podemos cambiarlo a column (columna):

.card {
  display: flex;
  flex-direction: column;
}

En ese caso, el eje principal irá de arriba hacia abajo y el transversal, de izquierda a derecha. Así, los elementos flex de las tarjetas se colocarán de arriba hacia abajo.

Queremos intercambiar la imagen y el encabezado de cada tarjeta sin cambiar el HTML. Primero convertiremos las tarjetas en contenedores flex y giraremos el eje principal. En el siguiente ejercicio cambiaremos el orden visual de los elementos.