Usamos flexbox

Vamos a crear otra página. Este es su diseño:

Las condiciones son las mismas: el marcado y los estilos decorativos ya están listos. Solo debemos crear la distribución. Volveremos a resaltar las cajas principales para verlas mejor.

Seguiremos el diseño de arriba abajo. Los márgenes de <body> ya están en cero. En el encabezado, las cajas van una debajo de otra, así que no hace falta cambiar su flujo. Pasaremos directamente al contenido principal, que debe formar dos columnas:

Ya sabemos crear columnas con Grid, pero hay otra opción: flexbox, cuyo nombre viene de flexible. Es otra tecnología muy popular. Puedes consultar su compatibilidad con los navegadores.

Para usar las propiedades de flexbox, cambiamos el tipo de caja con display:

display: flex;

Una caja de tipo flex se llama contenedor flex, y sus cajas hijas se llaman elementos flex.

Los elementos flex se colocan automáticamente a lo largo del eje principal. De forma predeterminada, este va de izquierda a derecha. Encontrarás más información sobre los ejes en «Introducción a flexbox».

Si convertimos <main> en un contenedor flex, sus hijos se colocarán en una fila. Como el contenido principal tiene dos secciones, obtendremos dos columnas. Si hubiera tres elementos flex, tendríamos tres columnas, y así sucesivamente.

Empecemos. Primero conectaremos las hojas de estilos y después convertiremos <main> de una caja de bloque en un contenedor flex para ver qué ocurre. Usaremos la clase page-main para darle estilos.