Maquetar con Flexbox

En esta lección colocarás varias cajas en horizontal y repartirás el espacio entre ellas: el primer paso de la maquetación moderna.

Al poner display: flex en un contenedor, sus hijos directos se alinean en fila automáticamente. gap define la separación entre ellos y flex: 1 les dice «repartíos el espacio sobrante a partes iguales». Antes de Flexbox esto se hacía con float y era mucho más frágil.

El código de ejemplo aplica display: flex a .box-row, así que las tres cajas de dentro se ponen en línea. Como cada .box lleva flex: 1, las tres acaban con el mismo ancho. Prueba a cambiar el flex de una de ellas a 2 y verás cómo se lleva el doble de espacio.

La confusión más habitual es aplicar display: flex al elemento que quieres mover, en vez de a su contenedor. Recuerda: flex se pone en el padre y afecta a los hijos.

Hoy en día Flexbox es la herramienta por defecto para barras de navegación, filas de tarjetas y botones alineados. Junto con CSS Grid, cubre casi toda la maquetación que necesitarás en el trabajo diario.