Unidad 13. Posicionamiento. Flexbox. Grid (XIII)



13.10. Flexbox. Align-items

Eje secundario o dirección secundaria, es la dirección perpendicular a la principal. Por defecto, es la dirección vertical de arriba a abajo pero se puede modificar con la propiedad align-items.

La propiedad align-items establece la forma en que se alinean los elementos en la dirección secundaria, (es decir, la alineación vertical) puede tomar los valores: flex-start, flex-end, center, stretch y baselina.

- flex-start, los elemento se alinean respecto al inicio de la dirección secundaria (es decir, por arriba)

Codigo: display: flex; justify-content: flex-start; align-items: flex-start; Los bordes superiores de los elemento se alinean por la parte superior.

Elemento flexible 1
Elemento 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem,
Elem. 3

- flex-end, los elemento se alinean respecto al final de la dirección secundaria (es decir, por abajo)

 

Elemento flexible 1
Elemento 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem,
Elem. 3

- center, los elemento se alinean respecto al centro de la dirección secundaria (es decir, por la mitad)

 

Elemento flexible 1
Elemento 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem,
Elem. 3

- stretch, es el valor por defecto, ocupa todo el espacio disponible en la dirección secundaria (por defecto, la altura) respetando las restricciones de tamaño que pudieran existir.

 

Elemento flexible 1
Elemento 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem,
Elem. 3

- baseline, los elementos se alinean respecto a la base de la primera línea del texto de cada elemento. Para apreciarlo, hemos cambiado el tamaño del texto.

 

Elemento flexible 1
Elemento 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem,
Elem. 3

13.11. Align-self

Estas dos propiedades (justify-items y align-items) que acabamos de ver afectan a todos los elementos de la caja flexible, pero podemos aplicar el mismo tipo de alineación a elementos concretos de la caja flexible con las propiedades justify-seft y align-seft.

Por ejemplo, la caja flexibe tiene aplicada align-items: center , pero el elemento flexible 1 tiene aplicada align-self: flex-start, con lo cual es esta alineación la que prevalece sobre la anterior.

 

Elemento flexible 1
Elemento 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem,
Elem. 3

Enero-2019 (V 2.02)
Pág. 13.13
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.