Flexbox, explicado moviendo cajas
Cambia flex-direction, justify-content, align-items, gap y flex-wrap con los controles y mira cómo se colocan las cajas y qué CSS genera.
Laboratorio de Flexbox
Flexbox coloca elementos en una fila o una columna y reparte el espacio entre ellos. La forma más rápida de entenderlo es tocar los controles y mirar.
Prueba las propiedadesinteractivo
CSS generado
El eje principal y el eje cruzado
Todo en Flexbox gira en torno a dos ejes. Con flex-direction: row el eje principal es horizontal y el cruzado vertical. Con column se intercambian.
| Propiedad | Actúa sobre | Para qué |
|---|---|---|
justify-content | eje principal | alinear y repartir espacio a lo largo |
align-items | eje cruzado | alinear en la otra dirección (arriba/centro/abajo) |
gap | ambos | separación entre cajas, sin margin |
flex-wrap | eje principal | permitir que las cajas salten de línea |
Propiedades de los hijos
Las de arriba van en el contenedor. Estas van en cada caja hija:
.caja {
flex-grow: 1; /* reparte el espacio sobrante (0 = no crecer) */
flex-shrink: 1; /* se encoge si falta espacio */
flex-basis: 200px; /* tamaño de partida antes de crecer/encoger */
/* atajo habitual: */
flex: 1; /* = flex: 1 1 0 → todas iguales, ocupan todo */
}
.caja-especial {
align-self: flex-end; /* como align-items pero solo para esta caja */
}El truco más usado:
flex: 1 en varias cajas hermanas hace que se repartan el ancho a partes iguales.Recetas rápidas
/* Centrar algo, del todo */
.centrado { display: flex; justify-content: center; align-items: center; }
/* Barra de navegación: logo a la izquierda, menú a la derecha */
.navbar { display: flex; justify-content: space-between; align-items: center; }
/* Fila de tarjetas que salta de línea sola */
.tarjetas { display: flex; flex-wrap: wrap; gap: 16px; }
.tarjetas > * { flex: 1 1 240px; } /* mínimo 240px, luego crecen */Con flex-direction: row, ¿qué propiedad mueve las cajas en horizontal?
Siguiente paso
Flexbox es para una dimensión (fila o columna). Para rejillas de dos dimensiones a la vez, usa CSS Grid. Repasa también CSS desde el principio.