Unidad 13. Posicionamiento. Flexbox. Grid (XII)

13.9. Flexbox. Justify-content

En este vídeo explicamos los distintos tipos de alineación con cajas flexibles:

Alineación principal, define la forma en que los elementos flexibles se distribuyen a lo largo de la dirección principal. Se controla con la propiedad justify-content

La propiedad justify-content, que puede tomar los valores

- flex-star, los elementos se ajustan desde el principio de la dirección principal (es decir desde la izquierda para flex-direction: rows), y se colocan unos al lado de otros, es decir alienados a la izquierda. Es el valor por defecto. Este es un ejemplo.

Código: display: flex; justify-content: flex-start; Si no lo especificamos, se aplica el valor por defecto al contenedor, flex-direction: row. Y la alineación flex-start a la izquierda.

 

- flex-end, los elementos se ajustan desde el final de la dirección principal (es decir desde la derecha para flex-direction: rows), y se colocan unos al lado de otros, es decir alineados a la derecha. Este es un ejemplo:

Código: display: flex; justify-content: flex-end; Si no lo especificamos, se aplica el valor por defecto al contenedor, flex-direction: row. Y la alineación flex-end a la derecha.

- center, los elementos se ajustan al centro, unos junto a otros, sin dejar espacio entre ellos, los espacios libres quedan a la derecha e izquierda, Este es un ejemplo:

Código: display: flex; justify-content: center; Si no lo especificamos, se aplica el valor por defecto al contenedor, flex-direction: row. Y la alineación center, centrada.

- space-around, los elementos se distribuyen equitativamente a lo largo de todo el contendor, el espacio sobrante se distribuye entre los elementos, una porción a cada lado de cada elemento, los elementos de los extremos tendrán la mitad de espacio que los restantes. Es más fácil entenderlo con un ejemplo:

Código: display: flex; justify-content: space-around; Si no lo especificamos, se aplica el valor por defecto al contenedor, flex-direction: row. Y la alineación distribuida.

- space-between, el primer elemento se ajusta a la izquierda y el último a la derecha, y el resto de elementos se distribuyen repartiendo el espacio entre todos. Es una alineación justificada pero sin espacio en los extremos. El espacio entre elementos es siempre el mismo. Este es un ejemplo:

Código: display: flex; justify-content: space-between; Si no lo especificamos, se aplica el valor por defecto al contenedor, flex-direction: row. Y la alineación distribuida desde los extremos.

Si sólo hay un elemento en el contenedor, las alineaciones center y space-around producen el mismo efecto. Y lo mismo sucede para space-between y flex-star.