Unidad 13. Posicionamiento. Flexbox. Grid (XII)



13.9. Flexbox. Justify-content

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.

Codigo: 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.

Elemento flexible 1
Elemento 2
Elem. 3

 

- 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:

Codigo: 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.

Elemento flexible 1
Elemento 2
Elem. 3

- 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:

Codigo: 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.

Elemento flexible 1
Elemento 2
Elem. 3

- 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:

Codigo: 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.

Elemento flexible 1
Elemento 2
Elem. 3

- 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:

Codigo: 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.

Elemento flexible 1
Elemento 2
Elem. 3

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.


Enero-2019 (V 2.0)
Pág. 13.12
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.