Teoría: Alineación de elementos en el eje principal

Imagina que estás diseñando una tienda en línea y necesitas organizar una lista de tarjetas de productos. Cada tarjeta debe tener un espacio uniforme entre sí, tanto en horizontal como en vertical, como en la imagen a continuación:

Antes de conocer Flexbox, probablemente usarías float y margin para posicionar estos elementos. Pero esto trae un problema: el margen derecho de la última tarjeta no debería estar ahí, y ajustar esto manualmente puede ser tedioso.

Vamos a analizar este problema y ver cómo Flexbox lo resuelve de manera sencilla.

Problema con float y margin

Mira el siguiente ejemplo usando float:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Aquí estamos usando margin para espaciar los elementos. Sin embargo, el último elemento de cada fila tiene un margen innecesario a la derecha. Se han intentado muchas soluciones para esto: usar JavaScript, asignar clases específicas a los últimos elementos, o incluso usar el selector :nth-child. Pero con Flexbox, podemos resolverlo con una sola regla.

Solución con justify-content

Flexbox nos ofrece una propiedad clave: justify-content. Esta propiedad nos ayuda a distribuir los elementos dentro del contenedor de manera flexible. Veamos sus valores más comunes:

Centrados en el eje principal

Cuando usamos justify-content: center, los elementos se alinean en el centro del contenedor con espacios iguales a los lados.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Alineados al inicio

flex-start - Los elementos comienzan desde el borde izquierdo del contenedor sin ningún espacio adicional.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Alineados al final

flex-end - Los elementos se agrupan al final del contenedor.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

space-between: Espaciado uniforme sin márgenes laterales

El primer elemento se coloca al inicio del contenedor, el último al final, y los demás se distribuyen equitativamente.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Espaciado uniforme con márgenes laterales

space-around - Cada elemento tiene un espaciado igual a cada lado, pero los espacios en los extremos son la mitad de los internos.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Espaciado uniforme en todos los lados

space-evenly - Aquí, todos los espacios (incluidos los extremos) son exactamente iguales.

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Alineación en el eje transversal

Flexbox nos permite no solo alinear elementos horizontalmente (justify-content), sino también en el eje transversal con align-items. Algunas opciones populares: