Flexbox dentro de grid

Al dividir la navegación en dos columnas, el logotipo quedó en una y la lista de enlaces en la otra. Volveremos al logotipo un poco más adelante; por ahora nos ocuparemos de la lista. Sus elementos tienen cajas de bloque de forma predeterminada. Por eso ocupan todo el ancho del elemento padre y se colocan de arriba abajo.

Inicio

Rutas

Equipo

Necesitamos reducir el ancho de los elementos de la lista, colocarlos en una fila y repartir entre ellos el espacio libre.

La forma más sencilla es usar flexbox: de forma predeterminada, los elementos flex se colocan en horizontal y ocupan el espacio que necesita su contenido, incluidos los márgenes y el relleno.

.flex-container {
  display: flex;
}

Flexbox también permite controlar fácilmente la alineación de los elementos. De forma predeterminada, los elementos flex se colocan desde el borde izquierdo del contenedor, uno junto a otro. Podemos cambiarlo con la propiedad justify-content. Se aplica al contenedor flex y controla la alineación de sus elementos en el eje principal.

Necesitamos que el primer y el último elemento flex queden junto a los bordes del contenedor y que el espacio libre se reparta por igual entre los elementos. Para conseguirlo, usamos justify-content con el valor space-between.

.flex-container {
  display: flex;
  justify-content: space-between;
}

Fíjate: convertimos el bloque de navegación en un contenedor grid y ahora usamos flexbox para la lista de enlaces que contiene. Podemos combinar distintas tecnologías al crear una distribución.

Convertiremos la lista con la clase navigation-list en un contenedor flex para colocar sus elementos en horizontal. Después los alinearemos en el eje principal.