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 elementos se alinean respecto al inicio de la dirección secundaria (es decir, por arriba)
Código: display: flex; justify-content: flex-start; align-items: flex-start; Los bordes superiores de los elemento se alinean por la parte superior.
- flex-end, los elementos se alinean respecto al final de la dirección secundaria (es decir, por abajo)
- center, los elementos se alinean respecto al centro de la dirección secundaria (es decir, por la mitad)
- 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.
- 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.
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.
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.