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:
center: 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
flex-start: Alineados al inicio
Los elementos comienzan desde el borde izquierdo del contenedor sin ningún espacio adicional.
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
flex-end: Alineados al final
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
space-around: Espaciado uniforme con márgenes laterales
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
space-evenly: Espaciado uniforme en todos los lados
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:
| Valor | Descripción |
|---|---|
flex-start |
Alinea los elementos en la parte superior del contenedor. |
flex-end |
Los alinea en la parte inferior. |
center |
Los centra verticalmente. |
stretch |
Expande los elementos para que ocupen todo el espacio disponible. |
baseline |
Alinea los elementos según su línea base de texto. |
Resumen
justify-contentayuda a alinear elementos horizontalmente dentro de un contenedor flex.- Diferentes valores (
center,flex-start,flex-end,space-between,space-around,space-evenly) ofrecen distintas formas de organizar los elementos. align-itemspermite alinear los elementos en el eje transversal (start,end,center,stretch,baseline).- Con Flexbox, puedes manejar la alineación de forma flexible y responsiva sin escribir reglas CSS complicadas.
Materiales adicionales
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
