Flexbox | Propiedades de alineación | propiedad justify‑content
Existen varias propiedades que permiten disponer los ítems. En este ejercicio conoceremos la propiedad justify‑content. Se utiliza para alinear los ítems del eje principal que por defecto es el horizontal.
CASO 1Declaración justify‑content: flex-start;
La declaración justify‑content: flex-start;, agrupa los ítems al principio del eje principal.
CASO 2Declaración justify‑content: flex-end;
La declaración justify‑content: flex-end;, agrupa los ítems al final del eje principal.
CASO 3Declaración justify‑content: center;
La declaración justify‑content: center;, agrupa los ítems al centro del eje principal.
CASO 4Declaración justify‑content: space‑between;
La declaración justify‑content: space‑between;, distribuye los ítems dejando el máximo espacio para separarlos.
CASO 5Declaración justify‑content: space‑around;
La declaración justify‑content: space‑around;, distribuye los ítems dejando el mismo espacio alrededor de ellos (izq/dcha).
CASO 6Declaración justify‑content: space‑evenly;
La declaración justify‑evenly: space‑around;, distribuye los ítems dejando el mismo espacio (solapado) a izquierda y derecha.