Listado completo de tutoriales

63 - Flexbox - (align-items aplicada al contenedor)

La tercer propiedad que afecta al contenedor se llama "align-items". Es similar a la propiedad que vimos anteriormente "justify-content", pero la alineación es con respecto al eje transversal.

Los valores que podemos asignarle a la propiedad "align-items" son:

stretch
flex-start
flex-end
center
baseline

Para entender como se distribuyen los items en el contenedor podemos ejecutar este programa Javascript que modifica en forma dinámica la prpiedad "align-item":

El valor por defecto que almacena la propiedad "align-items" es "stretch" (stretch significa estirar, es decir el item ocupa en el eje secundario todo el espacio posible que permite el contenedor)

Los otros valores posibles puede probarlos modificando la propiedad "align-items" y pueden ser:

• stretch Los items ocupan toda la altura o anchura dependiendo del valor de la propiedad "flex-direction".
• flex-start Los items se ubican en la parte superior o izquierda del contenedor dependiendo del valor de la propiedad "flex-direction".
• flex-end Los items se ubican en la parte inferior o derecha del contenedor dependiendo del valor de la propiedad "flex-direction".
• center Los item aparecen centrados con respecto al eje transversal.
• baseline Los item se alinean respecto al eje transversal del contenedor teniendo en cuenta las líneas base de cada item, esta se define en base a los texto de los ítems.

Retornar